MCPInstall

frontend-design

by dengineproblemFrontend & Design

Эксперт по frontend дизайну. Используй для создания UI/UX, типографики, цветовых схем, анимаций и distinctive visual aesthetics.

Installs
288
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/dengineproblem/agents-monorepo --skill frontend-design
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads frontend-design automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Frontend Design Expert

Expert in creating distinctive, production-grade frontend interfaces.

Design Thinking

Before coding, commit to a BOLD aesthetic direction:

  • Purpose: What problem does this interface solve?
  • Tone: Pick an aesthetic (minimalist, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, industrial)
  • Differentiation: "What makes this UNFORGETTABLE?"

CRITICAL: Choose a clear conceptual direction and execute with precision.

Typography

Choose distinctive, characterful fonts. Avoid generic options:

  • Avoid: Inter, Roboto, Arial
  • Consider: Display fonts paired with refined body fonts
  • For Russian projects, use quality cyrillic fonts

Color & Theme

Commit to cohesive aesthetics:

:root {
  /* Define your palette with CSS variables */
  --primary: #1A237E;
  --secondary: #FF6B35;
  --accent: #4CAF50;
  --background: #0A0A0A;
  --text: #FAFAFA;
}

Dominant colors with sharp accents outperform timid palettes.

Motion & Interactions

Use animations for effects and micro-interactions:

/* CSS-only for HTML */
@keyframes reveal {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.staggered-reveal > * {
  animation: reveal 0.6s ease forwards;
}

.staggered-reveal > *:nth-child(1) { animation-delay: 0.1s; }
.staggered-reveal > *:nth-child(2) { animation-delay: 0.2s; }
.staggered-reveal > *:nth-child(3) { animation-delay: 0.3s; }

For React, use Motion library. Orchestrate page load reveals with staggered animations and scroll-triggered interactions.

Spatial Composition

Employ unexpected layouts:

  • Asymmetry and overlap
  • Diagonal flow
  • Grid-breaking elements
  • Generous or controlled negative space

Backgrounds & Visual Details

Create atmosphere through:

  • Gradient meshes
  • Noise textures
  • Geometric patterns
  • Layered transparencies
  • Dramatic shadows
  • Decorative borders
  • Custom cursors
  • Grain overlays

What to Avoid

Never default to generic AI aesthetics:

  • Overused font families (Inter, Roboto, Arial)
  • Clichéd color schemes (purple gradients)
  • Predictable layouts
  • Cookie-cutter designs lacking context-specific character

Implementation Philosophy

Match implementation complexity to the aesthetic vision:

  • Maximalist designs: Elaborate code with extensive animations and effects
  • Minimalist designs: Restraint, precision, careful attention to spacing, typography, and subtle details

Remember: Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

FAQ

What does the frontend-design skill do?

Эксперт по frontend дизайну. Используй для создания UI/UX, типографики, цветовых схем, анимаций и distinctive visual aesthetics.

How do I install frontend-design?

Run npx skills add https://github.com/dengineproblem/agents-monorepo --skill frontend-design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/frontend-design/ (personal) or .claude/skills/frontend-design/ (project).

Which AI agents can use frontend-design?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is frontend-design safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains frontend-design?

It is published by dengineproblem in dengineproblem/agents-monorepo. It has 288 recorded installs.

More from dengineproblem/agents-monorepo

View all →

social-media-marketing

dengineproblem/agents-monorepo

Эксперт по SMM. Используй для стратегий в Instagram, Facebook, TikTok, LinkedIn, контент-планов и community management.

Marketing & SEO1.2K installs

video-marketing

dengineproblem/agents-monorepo

Open the skill to read its SKILL.md instructions.

Marketing & SEO259 installs

k6-load-test

dengineproblem/agents-monorepo

Эксперт k6 нагрузочного тестирования. Используй для performance testing, load scenarios и stress tests.

Testing & QA181 installs

b2b-saas-marketing

dengineproblem/agents-monorepo

Эксперт по B2B SaaS маркетингу. Используй для стратегий генерации спроса, growth-маркетинга, PLG, расчёта CAC/LTV, оптимизации воронки и маркетинговых операций.

Marketing & SEO141 installs

seo-expert

dengineproblem/agents-monorepo

Open the skill to read its SKILL.md instructions.

Marketing & SEO129 installs

marketing-automation

dengineproblem/agents-monorepo

Open the skill to read its SKILL.md instructions.

Marketing & SEO126 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs