frontend-design
Analyze existing designs and generate production-grade design systems with intentional aesthetics.
- Three operational modes: analyze CSS for patterns and tokens, specify design requirements in JSON, and generate color palettes, typography systems, design tokens, and framework components
- Supports React, Vue, Svelte, and vanilla HTML with multiple styling approaches (Tailwind, CSS modules, styled-components, scoped CSS)
- Includes accessibility auditing (contrast ratios, focus states, touch targets) and design token extraction in multiple formats (CSS, SCSS, Tailwind, Style Dictionary, TypeScript)
- Requires Deno runtime with
--allow-readand--allow-writepermissions; operates on existing CSS files or JSON specifications for generation
Frontend Design
Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. This skill combines design philosophy guidance with practical TypeScript tooling for analyzing existing designs and generating design system artifacts.
Core Principle: Choose a clear aesthetic direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
When to Use This Skill
Use when:
- Building web components, pages, or applications
- Auditing existing CSS for design inconsistencies
- Extracting design tokens from legacy codebases
- Generating color palettes and typography systems
- Creating component templates across frameworks
- Checking accessibility compliance for design elements
Don't use when:
- Simple text content changes
- Backend-only work
More from jwynia/agent-skills
requirements-analysis
Diagnose requirements problems and guide discovery of real needs and constraints
1.9Kgodot-best-practices
Guide AI agents through Godot 4.x GDScript coding best practices including scene organization, signals, resources, state machines, and performance optimization. This skill should be used when generating GDScript code, creating Godot scenes, designing game architecture, implementing state machines, object pooling, save/load systems, or when the user asks about Godot patterns, node structure, or GDScript standards. Keywords: godot, gdscript, game development, signals, resources, scenes, nodes, state machine, object pooling, save system, autoload, export, type hints.
1.5Kpresentation-design
Design and evaluate presentations that communicate effectively. Use when designing a presentation, creating slides, getting presentation feedback, structuring a talk, or reviewing slides. Keywords: presentation, slides, talk, PowerPoint, Keynote, reveal.js.
1.4Kweb-search-tavily
Search the web using Tavily API for high-quality, AI-optimized results with advanced filtering options. Use when you need structured search results, domain filtering, relevance scores, or AI-generated answer summaries. Requires TAVILY_API_KEY. Keywords: tavily, advanced search, filtered search, domain filtering, relevance scoring.
1.1Kpdf-generator
Create and manipulate PDF files programmatically. Use when the user needs to generate PDFs, fill PDF forms, extract PDF content, add watermarks/overlays, or merge documents. Supports both template-based generation (form filling, overlays) and from-scratch creation. Keywords: PDF, document, form, fillable, merge, watermark, extract, text, report.
731story-coach
Act as an assistive writing coach who guides but never writes for the user. Use when helping someone develop their own writing through questions, diagnosis, and frameworks. Critical constraint - never generate story prose, dialogue, or narrative content. Instead ask questions, identify issues, suggest approaches, and let the writer write.
712