All skills.
Open a skill to see what it covers, its key rules and how to install it. New to skills? Start with what a design skill does for your AI agent.
Design director
Free foundations
Typography
FreeFonts, a role-based type scale, line height, tracking, measure, line breaks, numbers and font loading.
Layout and spacing
FreeA 4px spacing scale, grouping by distance, alignment, containers, grids and responsive structure.
UX writing
FreeHeadings, buttons, error messages, empty states and realistic sample content, all written without filler.
Color, surfaces and motion
Color and dark mode
ProOKLCH role tokens, true neutral greys, one accent, both themes, and a script that checks contrast and gamut.
Surfaces and depth
ProA four-level depth ladder, shadows, hairlines, radius, buttons, inputs, icons, glass and image frames.
Motion and animation
ProWhen to animate, six duration tiers, four curves, springs without overshoot, reduced motion and 18 recipes.
Pages and states
Landing page
ProMessage first, page structure, hero, real proof, features, pricing, FAQ, motion and performance.
Dashboard and app UI
ProApp shells, data tables, settings, dashboards, charts, detail panels, command menus and keyboard shortcuts.
Accessibility and UI states
ProEvery interaction and data state, plus keyboard, touch, zoom, forced colors and screen readers.
Review and reuse
UI review and polish
ProA tag-aware code scanner and a rendered review across 12 categories, ranked P0 to P2, with a full checklist.
DESIGN.md generator
ProPulls a project's real design system into DESIGN.md, or starts from four contrast-checked starter systems.
Wensity components
ProSearches the live Wensity catalog, installs with the CLI or MCP, and composes items without breaking them.