Design and code frontend UI components from user briefs.
npx skills add https://github.com/wellsgz/SonarScope --skill frontend-design-wellsgz
Please help me install this Agent Skill. Skill: frontend-design Source: https://github.com/wellsgz/SonarScope/tree/main/.codex/skills/frontend-design Command: npx skills add https://github.com/wellsgz/SonarScope --skill frontend-design-wellsgz
Creating frontend interfaces that feel distinctive and production-ready often requires bridging design aesthetics with robust, maintainable code. This skill guides designers and developers to produce UI that avoids generic AI slop, delivering polished components, design tokens, and accessible patterns.
Provide a project brief and target framework, and I will generate a production-grade frontend design with ready-to-run components.
High-intent search queries and answers about installing and using this skill.
To generate production-grade frontend UI components, provide a project brief and target framework. The skill designs reusable pages and components aligned with your chosen aesthetic, ready for immediate integration.
Building a design system with semantic tokens involves defining typography, color, spacing, and motion values. This skill defines these tokens to ensure visual consistency and maintainability across your product.
Ensuring accessibility and responsive behavior requires interfaces with WCAG-friendly contrast and keyboard navigation. This skill builds interfaces that meet these standards across various devices and screen sizes.
Yes, you can use this for dashboards, marketing sites, and product UIs. The skill applies its design logic across these formats to deliver cohesive, accessible, and production-ready frontend implementations.
Yes, frontend design works without external component or dependency libraries. The skill has zero dependencies and generates high-quality, maintainable code directly from your provided project brief.
Generated frontend code looks like generic AI slop when it lacks distinctive design aesthetics and robust maintainable code. This skill bridges that gap to deliver polished components, design tokens, and accessible patterns.
RedFox-SoftGenerate a dependency-ordered tasks.md file from design artifacts in spec-kit projects.
Tahasaif3Provide Radix UI-based components styled with Tailwind CSS for React interfaces.
matdev83Structure, validate, and test Go CLI applications with Cobra and Viper.
danghungtb26Decompose UI screens into reusable components with atomic design and API cores.
