npx claudepluginhub levifig/loaf --plugin loafWant just this skill?
Then install: npx claudepluginhub u/[userId]/[slug]
Covers UI/UX design, accessibility (WCAG 2.1), design systems, and responsive patterns.
This skill is limited to using the following tools:
references/a11y.mdreferences/accessibility-review.mdreferences/color.mdreferences/core.mdreferences/motion.mdreferences/responsive.mdreferences/spacing.mdreferences/systems.mdreferences/typography.mdDesign Principles
Philosophy: Design is problem-solving through systematic thinking, with accessibility and user needs at the center. Every design decision must be intentional, accessible, and meaningful.
Quick Reference
| Topic | Key Principle | Reference |
|---|---|---|
| Core | User-first, accessible by default, consistent, minimal | references/core.md |
| Color | Function first, 4.5:1 contrast minimum, never color-only | references/color.md |
| Typography | Legible, accessible, reinforce hierarchy | references/typography.md |
| Spacing | 8pt grid, consistent rhythm, logical properties | references/spacing.md |
| Responsive | Mobile-first, content-out, fluid layouts | references/responsive.md |
| Accessibility | WCAG 2.1 AA minimum, keyboard navigable, screen reader compatible | references/a11y.md |
| Accessibility Review | WCAG 2.1 AA checklist, testing tools, common issues | references/accessibility-review.md |
| Motion | Purposeful, natural, respect reduced motion | references/motion.md |
| Systems | Tokens, components, patterns, governance | references/systems.md |
Core Principles
1. User-First
Every design decision must serve user needs and goals.
- Understand user context: Who, what, why, when, where?
- Validate assumptions with real users
- Measure outcomes that matter to users
2. Accessible by Default
Accessibility is not a feature - it is a requirement.
- WCAG 2.1 AA minimum, AAA as aspiration
- Keyboard navigation for all functionality
- 4.5:1 contrast for text, 3:1 for UI components
- Never use color as the sole indicator
3. Consistent
Consistency reduces cognitive load and builds trust.
- Design tokens as single source of truth
- Component reuse over reinvention
- Predictable naming conventions
4. Minimal
Every element must justify its existence.
- Progressive disclosure
- Clear visual hierarchy
- Sufficient whitespace
5. Delightful
Good design feels effortless.
- Smooth, purposeful interactions
- Thoughtful details
- Performance as a feature
Design Tokens
Use semantic tokens, never hardcoded values.
// Pattern: [category]-[property]-[variant?]-[state?]
color-text-primary
color-background-secondary
spacing-component-padding-md
Critical Rules
- Never use pixel values directly - Always use design tokens
- Never use divs for buttons - Use semantic HTML
- Never skip alt text - All images need descriptions
- Never use color alone - Combine with icons/text
- Never ignore reduced motion - Respect user preferences
- Never animate layout properties - Use transform/opacity only
- Never skip focus indicators - Minimum 3:1 contrast
- Never exceed 75ch line length - Optimal readability at 65ch
Quality Checklist
Every design deliverable must meet:
- WCAG 2.1 AA compliant
- Keyboard navigable
- Screen reader compatible
- Color contrast verified (4.5:1 text, 3:1 UI)
- Focus indicators visible (3:1 contrast)
- Reduced motion respected
- Uses design tokens exclusively
- Touch targets minimum 44x44px
- Mobile responsive
- Documented in component library
Similar Skills
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.