Frontend Skills Plugin
Note: This project is for demonstrating Claude Skills with Claude Code.
A Claude Code plugin for creating distinctive, production-grade frontend UIs that avoid generic "AI slop" aesthetics. This Skill and Subagent is generated with referring Anthropic blog: Improving frontend design through Skills
Features
- Distinctive typography - Effective serif × sans-serif pairings
- Custom color palettes - Beyond default Tailwind colors
- Asymmetric layouts - 35/65 ratios, overlapping elements
- Purposeful animations - Focused on high-impact moments
Demo
- Left: With Skills
- Right: Without Skills
Prompt:
Result:
Installation
Execute following /plugin slash commands in Claude Code.
# Add marketplace
/plugin marketplace add oikon48/cc-frontend-skills
# Install plugin
/plugin install frontend-skills@cc-frontend-skills
Usage
Simply make frontend-related requests and the design skill will be applied automatically:
Build me a flight lookup nextjs web app where the user can put in a flight number and the app gives you the start time, end time, time zones, start location, and end location of the flight. For now, use a mock API that returns a list of matching flights. Display the search results under the form input. use @frontend-design-system-implementor , ultrathink
This prompt is taken from the demo of Google Antigravity (Youtube Link)
Theme Examples
- Nordic Minimal - Scandinavian warmth and serenity
- Neon Brutalism - Cyberpunk × brutalist fusion
- Organic Growth - Natural, organic shapes
- Tech Noir - Dark-mode first tech aesthetic
- Editorial Elegance - Magazine-inspired editorial design
Resources
- SKILL.md - Design guidelines
- themes.md - Theme implementations
- components.md - Component patterns
Contributing
Issues and pull requests are welcome! Feel free to contribute to this project.