Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

frontend

Étoiles20

Forks4

Mis à jour19 juillet 2026 à 16:10

Stack-agnostic frontend discipline (web · mobile · desktop): component structure, state, data fetching, loading/empty/error states, i18n, accessibility, performance. frontend-expert-csk applies it on every stack. Trigger phrases: "frontend", "screen", "component", "page", "UI", "state management", "interface"

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

byerlikaya

byerlikaya/claude-starter-kit

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Développeurs de logicielsProfessions informatiques et mathématiques·SOC 15-1252

Explorateur de fichiers

2 fichiers

SKILL.md

readonly

name	frontend
description	Stack-agnostic frontend discipline (web · mobile · desktop): component structure, state, data fetching, loading/empty/error states, i18n, accessibility, performance. frontend-expert-csk applies it on every stack. Trigger phrases: "frontend", "screen", "component", "page", "UI", "state management", "interface"

Frontend Discipline (stack-agnostic)

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/<name>/) — 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.
review-agent-csk 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.

Plus depuis ce dépôt

même dépôt

eval-grader

byerlikaya/claude-starter-kit

Measure output quality, don't vibe it: score a generative task with a two-layer grader — deterministic code metrics + per-dimension LLM-as-judge — over a fixed task set, as signed deltas vs a pinned baseline. Grades cost alongside correctness (pass-slow). Trigger phrases: "eval", "grader", "measure output quality", "LLM-as-judge", "score the output"

2026-07-1920

iterate

byerlikaya/claude-starter-kit

Refine-to-Done loop: repeat until tests green + review clean + nothing deferred; bounded. Not the harness /loop. Trigger phrases: "iterate", "loop until done", "keep going until"

2026-07-1920

security-scan

byerlikaya/claude-starter-kit

Stack-agnostic security audit: map the attack surface, trace untrusted input to dangerous calls, surface dependency and configuration flaws. Severity-ranked report with fixes. Trigger phrases: "security scan", "run a security scan", "OWASP check", "scan for vulnerabilities", "find security vulnerabilities", "security audit"

2026-07-1920

threat-model

byerlikaya/claude-starter-kit

Scope a security audit BEFORE scanning, to cut false positives: map assets, entry points, trust boundaries and 5-8 domain-specific attack classes into a parseable THREAT_MODEL.md. A threat survives a patch; a vulnerability is only evidence for one. Feeds security-scan. Trigger phrases: "threat model", "attack surface", "scope the audit", "trust boundary"

2026-07-1920

sonarqube-check

byerlikaya/claude-starter-kit

SonarQube quality gate (language-agnostic, local-first): 0 Bugs/Vulns/Hotspots/Code Smells, 0 build warnings. If no analyzer exists, install the language's local server-less Sonar analyzer and run it — never a remote server. Trigger phrases: "sonarqube", "quality gate", "code smell", "sonar scan"

2026-07-1620

worktree

byerlikaya/claude-starter-kit

Isolate risky or parallel file-mutating work in a git worktree so the main tree's uncommitted changes are never clobbered. For fan-out agents that edit files, throwaway experiments, or any change you may want to discard cleanly. Trigger phrases: "worktree", "git worktree", "isolate the changes", "sandbox this work", "parallel file edits"

2026-07-1320

name	frontend
description	Stack-agnostic frontend discipline (web · mobile · desktop): component structure, state, data fetching, loading/empty/error states, i18n, accessibility, performance. frontend-expert-csk applies it on every stack. Trigger phrases: "frontend", "screen", "component", "page", "UI", "state management", "interface"

Frontend Discipline (stack-agnostic)

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/<name>/) — 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

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)

DoD (this skill's contribution)

/simplify; no dead styles/unused props.
The four states are covered; i18n-integrity clean; accessibility passes the baseline matrix.
review-agent-csk 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.