Frontend Design (1)

**Judgement:** A strong, opinionated frontend-design guidance skill that is well-suited for agents building modern, polished React/Next.js/Tailwind UIs—especially marketing pages, dashboards, and forms—where mobile-first design, accessibility, and performance matter. **Strengths:** - Enforces good baselines: mobile-first layouts, adequate touch targets, sensible body text size, and clear type hierarchy. - Bakes in accessibility and UX best practices (contrast ratios, focus states, keyboard navigation, interaction feedback, loading states, optimistic updates). - Includes concrete performance guidance (lazy loading, image placeholders, code splitting, LCP/CLS targets). - Encourages distinctive visual identity (memorable element, strong typography/color choices) to avoid generic-looking sites. **Risks / Limitations:** - Highly opinionated rules (e.g., avoiding popular system/Google fonts, banning pure white backgrounds) may conflict with brand guidelines or existing design systems. - Scope is purely advisory: it doesn’t fetch data, run code, or integrate with design tools, so quality depends on how well the calling agent applies the patterns. - Focused on UI and UX; does not address complex application state, data fetching patterns, security, or backend integration. - Emphasis is on web UIs; not suitable as-is for native/mobile apps or non-React stacks. **Recommended Scenarios:** - You have an agent that generates or critiques React/Next.js + Tailwind frontends and you want consistently modern, accessible, performant UI decisions. - You need a structured checklist for landing pages, dashboards, and forms to avoid common UX pitfalls (poor mobile layouts, lack of feedback, broken accessibility). - You want a design-opinionated companion skill to pair with more general coding or product-agent skills, to push output toward production polish rather than basic scaffolding.