Ejecuta cualquier Skill en Manus
con un clic

Ejecuta cualquier Skill en Manus con un clic

frontend-design

Estrellas4

Forks0

Actualizado14 de julio de 2026 a las 17:17

Use when writing or modifying code under web-ui/ — React 19, TypeScript, Tailwind, TanStack Query. Covers this project's state, typing, import, component, WebSocket, and graph-rendering conventions plus the checks that must pass before declaring done.

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Ejecutar en Manus

Fuente

dangtrivan15

dangtrivan15/choruskube

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ejecutar en Manus

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Desarrolladores webOcupaciones informáticas y matemáticas·SOC 15-1254

SKILL.md

readonly

name	frontend-design
description	Use when writing or modifying code under web-ui/ — React 19, TypeScript, Tailwind, TanStack Query. Covers this project's state, typing, import, component, WebSocket, and graph-rendering conventions plus the checks that must pass before declaring done.

Frontend Design

You write React 19 + TypeScript 5.8 + Tailwind CSS 4 + TanStack Query code following ChorusKube conventions.

Stack conventions

State: TanStack React Query for all server state; React useState/useReducer for local UI state only
Types: No any — use unknown + narrowing, or define interfaces in src/lib/types.ts
Imports: Use @/ path alias for src/ — e.g. import { api } from '@/lib/api'
Components: Compose from Base UI primitives + shadcn patterns; apply Tailwind utility classes
WebSocket: Use the existing @stomp/stompjs client in src/lib/stomp.ts — do not create new connections
Graph nodes: Follow the existing @xyflow/react node rendering patterns in src/components/

Quality checks before declaring done

Run from web-ui/:

npm run build — TypeScript check + Vite build must pass with zero errors
npm run test — Vitest suite must pass
npm run lint — ESLint must pass
No inline styles — use Tailwind classes

Más de este repositorio

mismo repositorio

claude-md-management

dangtrivan15/choruskube

Use when creating or editing a CLAUDE.md file, or when a change alters conventions that CLAUDE.md documents. Covers what belongs in CLAUDE.md versus CONTRIBUTING.md, the expected structure, and the size limit.

2026-07-144

code-review

dangtrivan15/choruskube

Use when reviewing code — a diff, a pull request, or a peer agent's output. Gives the review order (security, correctness, test coverage, conventions) and the comment format (BLOCKING / SUGGESTION / NITPICK).

2026-07-144

code-simplifier

dangtrivan15/choruskube

Use when asked to simplify, refactor, or reduce complexity in existing code, or when a change has left code harder to follow. Lists the complexity signals to look for and the rules for refactoring safely.

2026-07-144

feature-dev

dangtrivan15/choruskube

Use when implementing a new feature or a bugfix, before writing implementation code. Enforces a read-first, test-driven, incremental workflow (red, green, refactor, verify) and the rules for not weakening existing tests.

2026-07-144

lsp

dangtrivan15/choruskube

Use before making structural changes to code — renaming a symbol, deleting code, adding an import, or altering a shared DTO or interface. Covers how to establish blast radius before the edit rather than after.

2026-07-144

name	frontend-design
description	Use when writing or modifying code under web-ui/ — React 19, TypeScript, Tailwind, TanStack Query. Covers this project's state, typing, import, component, WebSocket, and graph-rendering conventions plus the checks that must pass before declaring done.

Frontend Design

You write React 19 + TypeScript 5.8 + Tailwind CSS 4 + TanStack Query code following ChorusKube conventions.

Stack conventions

State: TanStack React Query for all server state; React useState/useReducer for local UI state only
Types: No any — use unknown + narrowing, or define interfaces in src/lib/types.ts
Imports: Use @/ path alias for src/ — e.g. import { api } from '@/lib/api'
Components: Compose from Base UI primitives + shadcn patterns; apply Tailwind utility classes
WebSocket: Use the existing @stomp/stompjs client in src/lib/stomp.ts — do not create new connections
Graph nodes: Follow the existing @xyflow/react node rendering patterns in src/components/

Quality checks before declaring done

Run from web-ui/:

npm run build — TypeScript check + Vite build must pass with zero errors
npm run test — Vitest suite must pass
npm run lint — ESLint must pass
No inline styles — use Tailwind classes