wild-frontend

어떤 스킬인가요?

Create bold, unconventional frontend designs when product conventions are intentionally not the goal.

설치 방법

프로젝트 폴더에서 아래 명령어를 실행하고, 설치할 에이전트를 선택하세요.

설치 명령을 직접 실행해야 적용됩니다. 지원 에이전트와 필요한 권한·라이선스는 제작자의 안내를 확인하세요.

스킬 원문 파일

policy:
  allow_implicit_invocation: false

# Creative Moves

Load this reference only when a wild frontend task needs more concept or visual direction.

## Possible Directions

- brutalist editorial
- cinematic sci-fi console
- playful toy interface
- dense cyberpunk dashboard
- luxury fashion microsite
- organic botanical system
- retro operating system
- maximalist poster layout
- generative art interface
- analog paper-and-ink workspace
- museum exhibit panel
- arcade machine UI
- surreal glass-and-light environment
- industrial control room
- experimental zine
- monochrome Swiss poster grid
- tactile scrapbook interface

Follow the user's requested direction first. Use these examples to develop unspecified parts of the brief, not to replace its aesthetic. Choose a coherent direction and make the visual choices serve it.

## Typography

Choose typography with character. Use oversized display headlines, unusual scale contrast, expressive spacing, editorial pull quotes, compressed labels, huge numbers, vertical or rotated text, mono details, delicate serif contrast, or brutal utility typography when they serve the concept.

## Color

Build a committed palette: one dominant atmosphere, one or two sharp accents, dramatic contrast, monochrome with a signal color, acidic highlights, muted editorial tones, deep cinematic darks, warm analog neutrals, or strange but controlled gradients.

## Layout

Break predictable SaaS structure while preserving comprehension. Use asymmetry, overlapping layers, diagonal flow, poster composition, split screens, dense information clusters, anchored navigation, dramatic negative space, or irregular grids.

## Surface And Texture

Use texture to make the screen feel specific: grain, glow, scanlines, paper texture, glass layers, hard shadows, geometric patterning, borders, frames, masks, cutouts, ornamental dividers, or custom badges.

## Motion

Use a few memorable motions instead of constant noise: staged entrances, hover distortions, reveal masks, sliding panels, kinetic typography, parallax, pulsing status, cursor-follow effects, or cinematic transitions.

Respect reduced-motion preferences. Reduce or replace nonessential movement, such as parallax or entrance sequences, while preserving content, controls, and understandable state changes. Verify the reduced-motion alternative when inspecting animated work.

---
name: wild-frontend
description: Create bold, unconventional frontend designs when product conventions are intentionally not the goal.
disable-model-invocation: true
---

# Wild Frontend

Create highly original, production-grade frontend artifacts where memorability, concept, and visual ambition matter more than product consistency.

Build real working code, not just a description.

For multi-step work, start with a short user-visible update that names the concept or first implementation surface you are checking.

## Goal

Choose one strong visual concept and execute it with discipline. The result should be distinctive, cohesive, functional, responsive, and usable.

## Success Criteria

- The result is real working code in the requested stack.
- One concept drives typography, color, layout, surface, texture, and motion.
- The composition is deliberate at both page and detail scale: hierarchy, alignment, proximity, rhythm, and negative space give the concept structure.
- The interface is surprising and memorable without blocking usability.
- Important text is readable, core controls support keyboard use and visible focus, reduced-motion preferences are respected, and decorative effects do not interfere.
- Interaction states the task can reach and common viewport sizes are handled.
- Visual output is rendered or inspected when the environment allows it.

## Creative Direction

Use the requested direction and references as constraints, then make deliberate creative choices where the brief leaves room. Before implementing, commit to a concise direction:

- **Purpose**: what the interface does
- **Concept**: the central idea
- **Tone**: brutal, luxurious, playful, cinematic, industrial, editorial, organic, surreal, retro, ceremonial, or another clear flavor
- **World**: the visual universe it belongs to
- **Signature detail**: what someone will remember
- **Interaction style**: how it moves, responds, or reveals itself

Use [references/creative-moves.md](references/creative-moves.md) only when you need additional concept examples or design moves.

## Craft Standard

Work as a visual craftsperson. Experimentation raises the standard for execution: unusual composition, asymmetry, overlap, and expressive type must look authored rather than accidental.

- Build the composition before adding effects. Establish the focal point, reading order, visual anchors, balance, tension, and the path the eye follows through the page.
- Treat negative space as a shape and pacing device, not the area left after placing elements. Tune margins, gaps, density changes, and empty regions so they create rhythm and reinforce the concept.
- Apply enduring graphic-design principles deliberately: hierarchy, alignment, proximity, repetition, contrast, scale, balance, rhythm, and figure-ground. Breaking a convention should create a specific visual or functional effect.
- Treat typography as both language and form. Refine measure, leading, tracking, wrapping, baseline relationships, and optical alignment; do not let dramatic type become careless type.
- Inspect the artifact at both scales: zoom out for silhouette, composition, and distribution of space; zoom in for edges, joins, layers, icon-and-label relationships, and interaction details. Use visible discrepancies and the brief to choose the next refinement.

## Constraints

- Keep the primary action clear.
- Keep important text readable.
- Preserve responsive behavior and keyboard-accessible controls when interactive.
- Provide usable loading, empty, and error states when relevant.
- Use accessible focus treatment and reasonable contrast for core content.
- Respect reduced-motion preferences. Reduce or replace nonessential motion while preserving content, controls, and understandable state changes.
- Avoid broken layouts at common viewport sizes.
- Do not let decorative effects block usability.

Question habitual choices such as centered cards, predictable heroes, timid palettes, purple/blue gradients on white, or generic fonts when they lack a connection to the concept. These are not aesthetic bans: follow a requested direction even when it uses a familiar treatment. Use creative freedom to develop the brief rather than replace it, and remove decoration or competing ideas that weaken it.

## Implementation Style

Write real working code in the requested stack: HTML/CSS/JS, React, Vue, Tailwind, CSS modules, SVG, Canvas, CSS animations, or component-local styling.

You may create one-off components, custom CSS, unusual layout systems, decorative layers, and bespoke interactions. Keep the code understandable enough to modify.

## Final Verification

Render the actual artifact with representative content. Inspect the full composition and close details at common viewport sizes: focal order, alignment anchors, negative space, section rhythm, text wrapping, optical balance, edge treatments, and interaction states. Responsive layouts should recompose intentionally rather than merely shrink or stack.

For animated work, inspect both the intended motion and the reduced-motion alternative. Confirm that essential content and controls remain available and that state changes still make sense.

A build or typecheck does not prove visual quality. Before each refinement, identify the visible discrepancy or unmet part of the brief it should address, then inspect the affected result. Continue while material problems remain in the concept's execution, readability, interaction, or responsiveness. If the artifact cannot be rendered, report that gap and the next best check.

## Output

Lead with the completed result, then report the concept, signature design moves, changed files, and validation performed.

## Stop Rules

Stop when the working artifact satisfies the brief, material visible problems are resolved, and relevant viewport, interaction, and motion checks are complete or their limits are stated. Do not keep redesigning a result that meets those conditions merely because another stylistic treatment is possible.