design-frontend

Original：🇺🇸 English

Translated

Visual design system patterns for web UIs — layout, responsive, Tailwind tokens. Use when implementing visual designs, working with CSS/Tailwind, or building responsive layouts.

1installs

Sourceravnhq/ai-toolkit

Added on2026-02-16

NPX Install

npx skill4agent add ravnhq/ai-toolkit design-frontend

SKILL.md Content

View Translation Comparison →

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-frontend
```
scope 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.