Common Ui DesignSAFE

A collection of Agent Skills Standard and Best Practice for Programming Languages, Frameworks that help our AI Agent follow best practies on frameworks and programming laguages

The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.

---
name: common-ui-design
description: Design distinctive, production-grade frontend UI with bold aesthetic choices. Use when building web components, pages, interfaces, dashboards, or applications in any framework (React, Next.js, Angular, Vue, HTML/CSS).
metadata:
  triggers:
    keywords:
    - build a page
    - create a component
    - design a dashboard
    - landing page
    - UI for
    - build a layout
    - make it look good
    - improve the design
    - build UI
    - create interface
    - design screen
---
# UI Design Direction

## **Priority: P0 (CRITICAL)**

Before writing any code, commit to deliberate aesthetic direction.

## Phase 0: Design Thinking (Mandatory Pre-Code)

Answer these before touching implementation:

1. **Purpose**: What problem this UI solve? Who uses it?
2. **Tone**: Pick one extreme and commit — brutally minimal | maximalist | retro-futuristic | editorial/magazine | luxury/refined | brutalist/raw | playful/toy-like | organic/natural | art deco | industrial/utilitarian
3. **Differentiation**: Name one thing user will remember about this interface.

Bold maximalism and refined minimalism both work — intentionality, not intensity, key.

## Aesthetic Dimensions

### Typography

- Pair distinctive **display font** + refined **body font**; never default to system fonts.
- Self-host via `next/font`, `@font-face`, or Google Fonts API — never CDN `<link>` in production.
- See [Font Pairing & Tone Examples](references/tones.md)

### Color & Theme

- Dominant color + sharp accent > timid, evenly-distributed palettes.
- Use CSS custom properties (`--color-primary`, `--color-accent`) for consistency.
- Commit: dark or light — don't default to light because it feels "safe".

### Motion

- One well-orchestrated entrance (staggered reveals, `animation-delay`) > scattered micro-interactions.
- CSS-first: `@keyframes`, `transition`, `animation-delay`; React: Motion library for complex sequences.
- See [Motion Patterns](references/motion.md)

### Spatial Composition

- Break grid intentionally: asymmetry, overlap, diagonal flow, grid-breaking elements.
- Generous negative space OR controlled density — never accidental middleground.

### Backgrounds & Depth

- Create atmosphere: gradient meshes, noise textures, layered transparencies, grain overlays.
- Dramatic shadows and decorative borders should match chosen tone.
- Solid white/gray backgrounds = missed creative opportunity.

## Anti-Patterns

- **No generic font defaults**: Inter/Roboto/Arial/system-ui produce forgettable UIs; choose characterful fonts.
- **No purple-gradient-on-white**: Most overused AI aesthetic; commit to something context-specific.
- **No scattered animations**: One orchestrated entrance beats ten random hover effects.
- **No accidental layouts**: Every spacing and positioning decision must serve aesthetic intent.
- **No same aesthetic twice**: Vary light/dark, font style, tone — never converge on single style.

## References

- [Tone Palette & Font Pairings](references/tones.md) — load when choosing aesthetic direction or fonts
- [Motion Patterns](references/motion.md) — load when implementing animations or transitions

## Canonical response anchors

When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:
- aesthetic

- Additional task-grounded exact anchors: typography

SAFEgrade B · trust 89/100 Nothing in the source contradicts what it says it does. Grade A is reserved for packages that have also passed the behavioural sandbox.

What the source does

Filesystem

none-observed

Network

none-observed

Shell

none-observed

Dependencies

pinned

Secrets in source

none-found

Findings (0)

No findings outside the package's declared scope.

Gates applied: no_behavioural_pass.