CtrlK
BlogDocsLog inGet started
Tessl Logo

design-frontend

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

Install with Tessl CLI

npx tessl i github:ravnhq/ai-toolkit --skill design-frontend
What are skills?

72

0.98x

Quality

58%

Does it follow best practices?

Impact

96%

0.98x

Average score across 3 eval scenarios

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/design/design-frontend/SKILL.md
SKILL.md
Review
Evals

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

  1. Identify whether the request clearly matches design-frontend scope and triggers.
  2. Apply the skill rules and referenced guidance to produce a concrete result.
  3. Validate output quality against constraints; if gaps remain, refine once with explicit assumptions.
Repository
ravnhq/ai-toolkit
Last updated
Created

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.