Agent skill · ma08
frontend-skill
Use when the task asks for a visually strong landing page, website, app, prototype, demo, or game UI. This skill enforces restrained composition, image-led hierarchy, cohesive content structure, and tasteful motion while avoiding generic cards, weak branding, and UI clutter.
What it needs
About 5k tokens when loaded.
What this skill does
Frontend Skill Use this skill when the quality of the work depends on art direction, hierarchy, restraint, imagery, and motion rather than component count. Goal: ship interfaces that feel deliberate, premium, and current. Default toward award-level composition: one big idea, strong imagery, sparse copy, rigorous spacing, and a small number of memorable motions. Working Model Before building, write three things: visual thesis: one sentence describing mood, material, and energy content plan: hero, support, detail, final CTA interaction thesis: 2-3 motion ideas that change the feel of the page Each section gets one job, one dominant visual idea, and one primary takeaway or action. Beautiful Defaults Start with composition, not components. Prefer a full-bleed hero or full-canvas visual anchor. Make the brand or product name the loudest text. Keep copy short enough to scan in seconds. Use whitespace, alignment, scale, cropping, and contrast before adding chrome. Limit the system: two typefaces max, one accent color by default. Default to cardless layouts. Use sections, columns, dividers, lists, and media blocks instead. Treat the first viewport as a poster, not a document. Landing Pages Default sequence: 1. Hero: brand or product, promise, CTA, and one dominant visual 2. Support: one concrete feature, offer, or proof point 3. Detail: atmosphere, workflow, product depth, or story 4. Final CTA: convert, start, visit, or contact Hero rules: One composition only. Full-bleed image or dominant visual plane. Canonical full-bleed rule: on branded landing pages, the hero itself must run edge-to-edge with no inherited page gutters, framed container, or shared max-width; constrain only the inner text/action column. Brand first, headline second, body third, CTA fourth. No hero cards, stat strips, logo clouds, pill soup, or floating dashboards by default. Keep headlines to roughly 2-3 lines on desktop and readable in one glance on mobile. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills ma08/frontend-skill