ravnhq/design-frontend
skills/frontend/design-frontend/SKILL.md
Visual design system patterns for web UIs. Tailwind CSS v4 design tokens and CSS variables, responsive design with container queries, dark mode, layout patterns, and spacing scales. Use when implementing visual designs, working with Tailwind CSS, or building responsive layouts.
$ install --global
skillsauthnpx skillsauth add ravnhq/ai-toolkit design-frontendInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 23, 2026, 9:49 AM55.4s11 files scanned
SKILL.md
- name:
- design-frontend
- description:
- Visual design system patterns for web UIs. Tailwind CSS v4 design tokens
- category:
- frontend
- status:
- ready
- version:
- 6
Visual Design Systems for Web UIs
Design system patterns for consistent, accessible, responsive interfaces. Tailwind CSS v4 changes the game with CSS variables for runtime theming. Core patterns: design tokens (colors, spacing, typography), responsive breakpoints and container queries, dark mode with proper contrast, component composition, and spacing scales.
Key challenges: hardcoded values instead of tokens (unmaintainable), responsive design without mobile-first thinking, dark mode implemented post-hoc (inaccessible), container queries for component-level responsiveness (not just viewport-based).
Workflow
When implementing visual designs:
- Define tokens — Colors, spacing, typography, shadows as CSS variables in
@theme - Choose container — Wrap component in
@containerfor container queries - Build mobile-first — Start with mobile layout, add breakpoints upward
- Test dark mode — Use
dark:variants; ensure contrast ratios - Validate touch targets — Min 44x44px for interactive elements
- Measure performance — CSS-in-JS libraries impact paint time; Tailwind is zero-runtime
Rules
Patterns are organized by concern:
- Layout — Max-width containers, consistent spacing, visual hierarchy
- Responsive Design — Mobile-first approach, breakpoints, container queries
- Design Tokens — Color scales, spacing scales, typography families
- Dark Mode — Proper contrast, color pairs, CSS variables for theming
- Components — Touch targets, affordances, accessibility
See rules/ for implementation patterns and examples.
Examples
Positive Trigger
User: "Set up a Tailwind design token system with dark mode support for our component library."
Expected behavior: Use design-frontend guidance, apply token patterns with CSS variables and color pairs.
Non-Trigger
User: "Write a Node.js REST API for user authentication."
Expected behavior: Do not prioritize design-frontend; choose a more relevant skill or proceed without it.
-
Error: Hardcoding color values in classes; theme changes require refactoring
-
Cause: Not using design tokens; colors scattered across codebase
-
Solution: Use
@themeto define colors as CSS variables; reference withvar(--color-*) -
Error: Dark mode looks washed out; low contrast on dark backgrounds
-
Cause: Color pairs not designed together; assumed inversion works
-
Solution: Test dark variants; use color scales with proper contrast ratios
Troubleshooting
-
Error: Container queries not working; elements not responding to container size
-
Cause: Parent not marked with
@containerclass -
Solution: Add
@containerto parent; use@sm:,@md:,@lg:variants on children -
Error: Dark mode styles not applying; dark: variants ignored
-
Cause: Dark mode not configured; use
darkMode: "class"or"media"in config -
Solution: Configure dark mode in
tailwind.config.jsor CSS@custom-variant -
Error: Touch targets too small; users struggle to tap buttons
-
Cause: Over-optimizing for desktop; assuming mouse precision on mobile
-
Solution: Use
h-11/w-11(44px) minimum for touch targets
Related Skills
ravnhq/promptify
testing
VerifiedTrustedCommunity
Transform user requests into detailed, precise prompts for AI models. Use when users say 'promptify', 'promptify this', 'rewrite this prompt', 'make this prompt better/more specific', or explicitly request prompt engineering or improvement of their request for better AI responses.
15SKILL.mdUpdated Apr 23, 2026
ravnhq/agent-skills-manager
tools
VerifiedTrustedCommunity
Manage AI skills from the Ravn AI Toolkit via corvus CLI — install, update, remove, search, and configure skills for any project. Use when: (1) Installing AI skills into a project, (2) Updating installed skills to latest versions, (3) Browsing or searching available skills, (4) Configuring global or per-project skill sets, (5) Troubleshooting corvus setup. Triggers on: "install skills", "add skills", "update skills", "corvus", "skill manager", "browse skills", "set up AI rules".
15SKILL.mdUpdated Apr 19, 2026
ravnhq/design-variations
development
VerifiedTrustedCommunity
Generate a gallery of design variations for a UI component. Takes an existing component (referenced by name, pasted code, or screenshot) and produces N distinct rendered alternatives in a single comparison page. Use when exploring visual directions, generating mockups, comparing design approaches for a component, creating A/B candidates, or when anyone says "show me options" or "give me variations" for a UI element.
14SKILL.mdUpdated Apr 23, 2026
ravnhq/qa-personality-builder
tools
VerifiedTrustedCommunity
Create custom QA agent personalities for project-specific testing needs. Guided builder that asks about the specialty, tools, and test scenarios, then generates a personality file and registers it in the QA config. Trigger on "create a QA personality", "add a custom test agent", "build a webhook tester", or when the user needs a project-specific QA agent. Also triggered by /qa-create-personality.
13SKILL.mdUpdated Apr 28, 2026