Resources
1Install
npx skillscat add ravnhq/ai-toolkit/design-frontend Install via the SkillsCat registry.
This skill provides patterns for implementing visual design systems in web UIs, covering layout structure, responsive behavior, and Tailwind CSS usage. It helps developers translate design specifications into consistent, maintainable frontend code by offering structured approaches to common styling and layout challenges. Use it when building or refining web interfaces that require adherence to a design system, particularly involving CSS frameworks like Tailwind.
Rules
See rules index for detailed patterns.
Examples
Positive Trigger
User: "Design a responsive dashboard layout with clear visual hierarchy."
Expected behavior: Use design-frontend guidance, follow its workflow, and return actionable output.
Non-Trigger
User: "Write unit tests for this payment service."
Expected behavior: Do not prioritize design-frontend; choose a more relevant skill or proceed without it.
Troubleshooting
Skill Does Not Trigger
- Error: The skill is not selected when expected.
- Cause: Request wording does not clearly match the description trigger conditions.
- Solution: Rephrase with explicit domain/task keywords from the description and retry.
Guidance Conflicts With Another Skill
- Error: Instructions from multiple skills conflict in one task.
- Cause: Overlapping scope across loaded skills.
- Solution: State which skill is authoritative for the current step and apply that workflow first.
Output Is Too Generic
- Error: Result lacks concrete, actionable detail.
- Cause: Task input omitted context, constraints, or target format.
- Solution: Add specific constraints (environment, scope, format, success criteria) and rerun.
Workflow
- Identify whether the request clearly matches
design-frontendscope and triggers. - Apply the skill rules and referenced guidance to produce a concrete result.
- Validate output quality against constraints; if gaps remain, refine once with explicit assumptions.