# Frontend

> |

- **Type:** Skill
- **Install:** `agentstack add skill-crewforth-crewforth-frontend`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [crewforth](https://agentstack.voostack.com/s/crewforth)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [crewforth](https://github.com/crewforth)
- **Source:** https://github.com/crewforth/crewforth/tree/main/kit/skills/frontend
- **Website:** https://crewforth.com/

## Install

```sh
agentstack add skill-crewforth-crewforth-frontend
```

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

## About

# Frontend Discipline (stack-agnostic)

Trigger phrases: "frontend", "screen size", "component", "page", "UI", "state management", "interface"

Web (React/Next/Vue/Svelte/Angular), mobile (React Native/Flutter) or desktop — shared principles.
The stack-specific "how" (native bridge, router choice, etc.) lives in the relevant project skill; this skill applies to all of them.

## Architecture
- **Presentation / logic separation:** component/view is pure and thin; business logic lives in the hook/composable/service layer.
- **Reusability:** repeated UI is factored out; the prop contract is clear and typed.
- **Folder:** feature-based (`features//`) — view, logic, and test together.

## State & data
- **Local state first** (`useState`/signal); if global is needed, the project's choice (store/context) — nothing imposed.
- **Data fetching:** cache + error + loading states are considered; race/abort are handled.

## State-complete UI (design it from the start)
Every data-bound view covers **four states**: **loading · empty · error · full**.
Don't code only the "full" case; empty/error/loading are part of the experience.

## i18n & accessibility (default, not decoration)
- User-visible text comes from the language file (project languages); no hard-coded strings (`i18n-integrity`).
- Meaningful labels/roles, sufficient contrast, keyboard/screen-reader access, appropriate touch/click target.

## Visual & UX quality
This skill covers *structure*; the **visual/UX design layer** — hierarchy, spacing rhythm, typographic scale, a
restrained color system, and polished states — lives in **`frontend-design`**. Apply it when the work is about how the
interface *looks and feels*, not just how it's wired.

## Responsive & performance
- Works across the target screen/device matrix (responsive/adaptive).
- Unnecessary renders (memo/callback), bundle size, lazy loading, virtualization for long lists.

## Verify at runtime (contract)
Prove a change works by **observing the running UI**, structured — not by interpreting a screenshot. Have components
emit `data-verify-*` state attributes, register verifiable units with fixtures + invariants (≥1 adversarial `probe`
each), expose `window.__verify`, and adopt the `PASS/FAIL/BLOCKED/SKIP` taxonomy (when in doubt, FAIL). Then drive
the browser to check it. The full convention: **`references/verify-contract.md`**.

## DoD (this skill's contribution)
- `/simplify`; no dead styles/unused props.
- The four states are covered; `i18n-integrity` clean; accessibility passes the baseline matrix.
- `crew-review-agent` clean.

## Constraints
- Surgical change; follow existing conventions, do not impose a stack/preference.
- Do not present data the platform does not provide as if it existed; do not promise a capability that isn't there.
- §4 applies: no AI trace or vendor template name in code/comments/strings.

## Source & license

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

- **Author:** [crewforth](https://github.com/crewforth)
- **Source:** [crewforth/crewforth](https://github.com/crewforth/crewforth)
- **License:** MIT
- **Homepage:** https://crewforth.com/

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-crewforth-crewforth-frontend
- Seller: https://agentstack.voostack.com/s/crewforth
- 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%.