Development
Plugin
frontend-skills
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.
Plugin Signal35/100Fair
maintained6
capable23
documented100
adopted39
Install on Claude Code
> /plugin marketplace add oikon48/cc-frontend-skills> /plugin install frontend-skills@cc-frontend-skills
In this plugin
See everything inside What's inside
Badges
README
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.
Author
License
File tree
FAQ
frontend-skills is a Claude Code plugin with 1 hand-picked skill for development work, indexed on Flowy. Install it with the command on its page. It includes frontend-design-system. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is frontend-skills?
- 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.
- How do I install frontend-skills?
- Run these in Claude Code: /plugin marketplace add oikon48/cc-frontend-skills then /plugin install frontend-skills@cc-frontend-skills. Then prompt normally.
- Does frontend-skills auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is frontend-skills free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it