frontend-skill
A set of design rules for Claude that enforces composition-first frontend work: full-bleed heroes, brand-first hierarchy, cardless layouts, and intentional motion.
Setup & Installation
What This Skill Does
A set of design rules for Claude that enforces composition-first frontend work: full-bleed heroes, brand-first hierarchy, cardless layouts, and intentional motion. Covers landing pages, app surfaces, prototypes, and game UIs. The constraints are specific and opinionated, not general best-practice reminders.
Without explicit direction, Claude defaults to generic SaaS layouts with card grids and weak brand placement; this skill forces composition, imagery, and motion decisions before any component gets written.
When to use it
- Building a product landing page where one full-bleed image anchors the entire first viewport
- Replacing a dashboard card mosaic with a layout-first information surface
- Adding scroll-linked and hover motion that changes how a page feels without adding visual noise
- Structuring a startup homepage so the brand name reads louder than the feature list
- Prototyping a game or app UI with deliberate spacing and minimal chrome
Similar Skills
gif-sticker-maker
Takes a photo of a person, pet, object, or logo and generates 4 animated GIF stickers in Funko Pop / Pop Mart figurine style.
wpds
Assists with building UI components and interfaces using the WordPress Design System (WPDS).
accessibility
Audits and improves web accessibility against WCAG 2.
algorithmic-art
Generates algorithmic and generative art using p5.