Design Skill
Two holistic skills for AI agents working with DaFink UI. The design skill covers design judgment: how to compose components into layouts, which style and palette to choose, when to use motion and loading effects, and how to avoid common mistakes. The mobile skill covers responsive and touch-specific guidance: breakpoints, overlay choice on small screens, gesture handling, and mobile forms. Neither duplicates component API reference; pair either with the MCP server for prop tables and live specs.
Installing the skill
Via the CLI, in your project root:
npx dafink-ui skillOr download either file above and drop it into your skills directory, .claude/skills/ for Claude Code, or the equivalent directory for your tool. Each skill is a single .md file; no build step or extraction required.
What's inside: design skill
Organized into 14 sections, grounded entirely in this codebase's actual design tokens, component specs, and pattern documents.
1. Choosing a Style
When to reach for Minimal, Neumorph, or Brutalist, and what each signals to users.
2. Choosing a Palette
Guidance on all six palettes: Zinc, Ocean, Ember, Forest, Noir, and Plum.
3. Style + Palette Combinations
Pairings that work well together and combinations to avoid.
4. Component Layout Patterns
Page structure, card composition, forms, data display, and dashboard layouts.
5. Button and Action Hierarchy
When to use primary, secondary, ghost, and destructive button variants.
6. Feedback and Notification Hierarchy
Choosing between Toast, Alert, Modal, and Drawer for different states.
7. Loading and Skeleton States
When to show a Skeleton, Spinner, or nothing at all.
8. Animation and Motion Effects
Using TextShimmer, Typewriter, CountUp, Reveal, Carousel, and Progress with purpose.
9. Content Hierarchy and Typography
Establishing visual hierarchy through type scale and weight.
10. Spacing and Layout
Consistent spacing rhythm across sections and components.
11. Responsive Design
Mobile-first rules and breakpoint behavior.
12. Color Usage Rules
When color communicates state, and what must accompany it.
13. Accessibility Non-Negotiables
The five rules that apply to every component, no exceptions.
14. Common Pitfalls
Mistakes agents commonly make when composing DaFink UI components.
What's inside: mobile skill
Organized into 9 sections, covering responsive and touch-specific guidance for using DaFink UI on small screens.
1. Touch Target Sizing
Reconciling the 24px WCAG floor with this library's 44px design target.
2. Viewport, Safe Areas, and the Viewport Meta Tag
Notch-safe layout, viewportFit, and env(safe-area-inset-*).
3. Responsive Breakpoints and Layout Patterns
Tailwind v4's stock breakpoints and the container-query pattern used in DataTable.
4. Choosing the Right Overlay on Small Screens
Modal vs Drawer vs SidePanel, and when Sidebar should collapse to a Drawer.
5. Data-Heavy Components on Mobile
Table, DataTable, Kanban, CommandPalette, and Carousel under touch input.
6. Gesture and Touch Interaction Patterns
Swipe behavior and why hover-only affordances fail on touch devices.
7. Mobile Performance and Reduced Motion
Keeping animation cheap and respecting the global reduced-motion rule.
8. Forms on Mobile
Input types, autocomplete, inputMode, and the 16px rule that avoids iOS auto-zoom.
9. Common Pitfalls
Mistakes agents commonly make building mobile UI with this library.
Skill vs. MCP server
The MCP server gives an agent live, queryable access to component specs and tokens: the exact prop tables and variants that exist right now. The skill is the opposite kind of knowledge: judgment that doesn't change request to request, like when to pick Brutalist over Minimal, when a Toast beats a Modal, when motion helps versus when it's noise. Install both for the best results; the skill makes the decisions, the MCP server supplies the facts.