Frontend Design
Skill Verifiziert AktivCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Create distinctive, production-grade frontend interfaces with high design quality, guiding LLM output away from generic AI aesthetics towards specific conceptual directions.
Funktionen
- Guides creation of production-grade frontend interfaces.
- Generates code avoiding generic AI aesthetics.
- Focuses on specific aesthetic directions (minimalism, maximalism, etc.).
- Emphasizes meticulous refinement in typography, color, motion, and composition.
- Differentiates through unique, memorable design choices.
Anwendungsfälle
- When a user asks to build a web component with a specific aesthetic.
- When a user needs a polished, production-ready webpage.
- When a user requests a frontend application with a strong, distinctive design direction.
Nicht-Ziele
- Generating generic or bland UI elements.
- Defaulting to overused font families or color schemes.
- Creating designs that lack context-specific character or intentionality.
Workflow
- Understand user requirements (component, page, application).
- Choose a bold aesthetic direction (Purpose, Tone, Constraints, Differentiation).
- Implement production-grade, visually striking, and cohesive code.
- Refine details meticulously (typography, color, motion, spatial composition, backgrounds).
Trust
- info:Issues AttentionOpen issues: 9462, Closed issues: 22831. The closure rate is significantly below 50%, indicating slow maintainer response to newer issues.
Installation
Zuerst Marketplace hinzufügen
/plugin marketplace add anthropics/skills/plugin install skills@anthropic-agent-skillsQualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
Impeccable
99Verwenden Sie dies, wenn der Benutzer ein Frontend-Interface entwerfen, neu gestalten, formen, kritisieren, prüfen, polieren, klären, destillieren, härten, optimieren, anpassen, animieren, einfärben, extrahieren oder anderweitig verbessern möchte. Deckt Websites, Landingpages, Dashboards, Produkt-UI, App-Shells, Komponenten, Formulare, Einstellungen, Onboarding und leere Zustände ab. Umfasst UX-Bewertung, visuelle Hierarchie, Informationsarchitektur, kognitive Last, Barrierefreiheit, Leistung, responsives Verhalten, Theming, Anti-Patterns, Typografie, Schriften, Abstände, Layout, Ausrichtung, Farbe, Bewegung, Mikrointeraktionen, UX-Texte, Fehlerzustände, Randfälle, i18n und wiederverwendbare Designsysteme oder Tokens. Verwenden Sie es auch für langweilige Designs, die mutiger oder ansprechender werden sollen, laute Designs, die leiser werden sollen, Live-Browser-Iterationen an UI-Elementen oder ambitionierte visuelle Effekte, die technisch außergewöhnlich wirken sollen. Nicht für reine Backend- oder Nicht-UI-Aufgaben.
Color Audit
100Color-only audit to extract, evaluate, and recommend improvements for the project's color system
Type Audit
100Typography-only audit covering font selection, type scale, readability, hierarchy, performance
Component Audit
100Component consistency audit covering state coverage, hierarchy, patterns
Angular Developer
100Generiert Angular-Code und bietet architektonische Anleitungen. Auslösen bei der Erstellung von Projekten, Komponenten oder Diensten oder für Best Practices zur Reaktionsfähigkeit (Signale, linkedSignal, Ressource), Formulare, Dependency Injection, Routing, SSR, Barrierefreiheit (ARIA), Animationen, Styling (Komponentenstile, Tailwind CSS), Tests oder CLI-Tools.
Setup Tailwind Typescript
100Configure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.