agentsclimarketplace

Designing frontend

Skill aiskillstore/marketplace/skills/byunk/designing-frontend

Security-audited skills for Claude, Codex & Claude Code. One-click install, quality verified.

Install
npx -y skills add aiskillstore/marketplace --skill designing-frontend

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

What its author says it does

Copied from the file, not written here

Build distinctive, production-grade frontend interfaces with memorable aesthetics. Use when creating web components, pages, or applications. Prioritizes creative, context-specific design over generic patterns.

SKILL.md

2.3 KB, 427 tokens by cl100k_base, as published. Nobody here has run it

Designing Frontend

Workflow

  1. Conceptualize

    • Identify purpose and user context
    • Choose a bold aesthetic direction (brutally minimal, maximalist, retro-futuristic, organic, luxury, brutalist, etc.)
    • Define the one unforgettable element
    • Note technical constraints (framework, performance, accessibility)

  2. Implement

    • Write production-grade code (HTML/CSS/JS, React, Vue, etc.)
    • Apply aesthetic guidelines below

  3. Verify

    • Check visual hierarchy and cohesion
    • Test interactions and animations
    • Validate accessibility requirements
    • Confirm no generic patterns emerged

  4. Iterate

    • Refine details based on verification
    • Enhance distinctiveness where needed

Aesthetic Guidelines

Typography

  • Use distinctive, characterful fonts (avoid Inter, Roboto, Arial, system fonts)
  • Pair expressive display fonts with refined body fonts

Color & Theme

  • Build cohesive palettes with CSS variables
  • Use dominant colors with sharp accents, not evenly-distributed schemes
  • Avoid clichéd combinations (purple gradients on white)

Motion

  • Create high-impact moments with orchestrated page loads and staggered reveals
  • Use CSS animations for HTML; Motion library for React
  • Add surprising hover states and scroll-triggered effects

Spatial Composition

  • Break from grid conventions: asymmetry, overlap, diagonal flow
  • Use generous negative space OR intentional density

Backgrounds & Visual Effects

  • Layer gradient meshes, noise textures, geometric patterns
  • Apply contextual effects: layered transparencies, dramatic shadows, decorative borders
  • Add atmosphere through depth and texture

Implementation Principles

  • Match complexity to vision: Maximalist designs require elaborate code; minimalist designs demand precision in spacing and typography
  • Vary every design: Different fonts, themes, aesthetics for each project
  • Never converge: Avoid repeated choices (Space Grotesk, common layouts)
  • Context-specific: Design should feel genuinely crafted for its purpose

Gives 1 of the 12 instructions most design frontend skills give in 427 tokens

Counted across 1,170 of the 1,878 authors here whose files we hold, read 2026-08-06

  • use css variables for color consistencyin 73 of 1170, across 24 files
  • match implementation complexity to the aesthetic visionhere, and in 70 of 1170, across 20 files
  • commit to one bold aesthetic direction before codingin 70 of 1170, across 25 files
  • add atmospheric background effects and texturesin 58 of 1170, across 10 files
  • use unexpected spatial compositions and layoutsin 55 of 1170, across 7 files
  • implement real working codein 55 of 1170, across 7 files
  • vary themes and aesthetics across different designsin 48 of 1170, across 7 files
  • launch chromium in headless modein 47 of 1170, across 4 files
  • close the browser when donein 47 of 1170, across 4 files
  • run provided scripts with help flag firstin 47 of 1170, across 4 files
  • use descriptive selectors for elementsin 47 of 1170, across 4 files
  • wait for network idle statein 46 of 1170, across 3 files

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.