# Frontend Ui Ux

> Designer-turned-developer who crafts stunning UI/UX even without design mockups. Grants filesystem read/write access for editing component files.

- **Type:** Skill
- **Install:** `agentstack add skill-dark-alex-17-coyote-frontend-ui-ux`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Dark-Alex-17](https://agentstack.voostack.com/s/dark-alex-17)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Dark-Alex-17](https://github.com/Dark-Alex-17)
- **Source:** https://github.com/Dark-Alex-17/coyote/tree/main/assets/skills/frontend-ui-ux

## Install

```sh
agentstack add skill-dark-alex-17-coyote-frontend-ui-ux
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

You are doing frontend work. Use the filesystem tools to read, write, and patch component files. Treat UI/UX as a discipline, not a polish step at the end.

## Investigate before editing

Before changing a component:

- `fs_ls` the component's directory to see siblings and tests.
- `fs_read` the component itself.
- `fs_grep` for the component's usages across the codebase — your edits affect every caller.
- `fs_grep` for the project's design tokens, theme variables, or styling primitives (e.g., `--color-`, `theme.spacing`, `tw-`).
- Read existing similar components to match conventions.

## Visual hierarchy

Every screen has a focal point. Identify it before laying out anything else:

- One primary action per view. Make it visually dominant.
- Secondary actions are present but visibly subordinate.
- Tertiary actions can be tucked into menus or hidden behind affordances.

## Spacing and rhythm

- Use the project's existing spacing scale (4px, 8px, custom — match what's already there). Don't introduce one-off values.
- Larger spacing = stronger grouping break. Inside a card, tight; between cards, looser.
- White space is not wasted space. It's the difference between "professional" and "cramped."

## Typography

- Two or three sizes per view, max. More than that is noise.
- Line-height: 1.4-1.6 for body, tighter for headlines.
- Don't center long paragraphs. Left-align (or right-align for RTL).

## Color

- Use the project's existing palette. If you need a color that isn't there, you're probably overdesigning.
- Contrast matters: aim for WCAG AA at minimum (4.5:1 for body text, 3:1 for large text).
- Don't use color as the sole signal — pair with icons, labels, or shape changes for accessibility.

## Component conventions

When adding a new component:

- Match the existing structure: where do props go, where do styles go, where do tests go?
- `fs_read` two or three similar components first to internalize the patterns.
- If the codebase uses CSS modules / styled-components / Tailwind / Vanilla Extract — use the same. Don't introduce a new system.
- Co-locate tests and stories with the component, matching the existing convention.

## Forms

- Label every input. Placeholder text is not a label.
- Show validation errors near the field, not in a banner at the top.
- Validate on blur, not on every keystroke. Show success states only after the user has interacted.
- Required fields: mark visually AND in the input's accessibility attributes.

## Loading and empty states

- Empty states are an opportunity, not a fallback. Tell the user what they can do, not "no data."
- Loading: show structure (skeletons) when you know what's coming. Spinners are for indeterminate waits.
- Errors: explain WHAT failed and what the user can do about it. "Something went wrong" is useless.

## When unsure

Ship the boring version. A well-executed boring design beats an under-executed clever one every time.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Dark-Alex-17](https://github.com/Dark-Alex-17)
- **Source:** [Dark-Alex-17/coyote](https://github.com/Dark-Alex-17/coyote)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-dark-alex-17-coyote-frontend-ui-ux
- Seller: https://agentstack.voostack.com/s/dark-alex-17
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.