# Frontend System

> UI/UX expert. Use for creating components, styling (Tailwind), accessibility, and translations (I18n). Trigger when: create a component, change appearance, add a chart, translate, stwórz komponent, zmień wygląd, dodaj wykres, przetłumacz.

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

## Install

```sh
agentstack add skill-zrozoom-agent-skills-core-frontend-system
```

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

## About

# 🎨 Frontend & Design System

## 1. Internationalization (I18n)

> [!CAUTION]
> **ZERO HARDCODED STRINGS!**
> Every user-visible text must use the `useTranslation` hook / `t()` (or your project's i18n equivalent).

**Required languages:** define the project's locale list in your i18n config (e.g. `pl.json`, `en.json`, ...).

**Key structure:**
```json
{
  "component.action.state": "Text"
}
```

## 3. Styling

- **Framework**: Tailwind CSS
- **Animations**: Framer Motion (for UI interactions) or CSS Transitions
- **Responsiveness**: Mobile-first (`sm:`, `md:`, `lg:`)
- **Dark mode**: Supported via `dark:` classes

## 4. SEO

New public pages **MUST** include the `` component:

```tsx

```

## 5. Accessibility (a11y)

- Use semantic HTML (``, ``, ``)
- All interactive elements must have `aria-label` or visible text
- Colors: minimum 4.5:1 contrast ratio (WCAG AA)

## 6. Pitfalls (Lessons Learned)

### P1. Runtime fetch of static files
**Mistake:** Files fetched via `fetch()` at runtime (not imported) reside outside `public/` → they don't end up in `dist/`.
**Fix:** Runtime files MUST be in `public/`. Only `public/` is copied to the build output.

### P2. Config defensiveness
**Mistake:** Missing field in a JSON config (e.g., `xRange`) → `TypeError` crash in the renderer.
**Fix:** Always use optional chaining with defaults: `config?.xRange ?? [-5, 5]`.

### P3. useIsMobile — matchMedia vs resize
**Mistake:** `addEventListener('resize')` + `innerWidth` — less performant and off-by-one at the breakpoint.
**Fix:** `matchMedia('(max-width: ${breakpoint - 1}px)')` — performant, no overlap.

### P4. PWA cache — large chunks
**Mistake:** Default workbox `maximumFileSizeToCacheInBytes` limit (2MB) silently skips large chunks.
**Fix:** Increase the limit when the bundle grows. Without this, offline mode loses critical resources.

### P5. Ratings / nullable values: null vs 0
**Mistake:** Missing rating mapped as `?? 0` → renders 0 stars (grey), as if someone rated it 0.
**Fix:** Use `?? undefined` — triggers the "no rating" state (yellow default).

## Source & license

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

- **Author:** [ZroZoom](https://github.com/ZroZoom)
- **Source:** [ZroZoom/agent-skills-core](https://github.com/ZroZoom/agent-skills-core)
- **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-zrozoom-agent-skills-core-frontend-system
- Seller: https://agentstack.voostack.com/s/zrozoom
- 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%.