ワンクリックでManusで任意のスキルを実行

始める

frontend

スター133

フォーク9

更新日2026年5月31日 10:32

Use this skill for frontend work in web_app (React/TypeScript, UI implementation, tests, and refactors).

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

streamband

streamband/hydra-srt

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

Frontend Skill

When to use

Use for any task touching web_app/, React components, TypeScript, styling, or frontend tests.

TypeScript policy

All new frontend code must be TypeScript — use .ts / .tsx, not .js / .jsx.
Existing JavaScript may stay as-is until you touch that file; when you edit it meaningfully, prefer migrating the changed parts to TypeScript (extract to a .tsx module if the file is large).
Put shared API/domain types in web_app/src/types/ (api.ts, errors.ts, routes.ts, interfaces.ts, endpoints.ts).
Put typed API clients in web_app/src/utils/*.ts (see utils/tokensApi.ts).
New page/tab UI: prefer web_app/src/pages/**/**/*.tsx; keep legacy .jsx parents as thin wrappers if needed.
Run npm run typecheck and npm run lint before considering frontend work done; CI runs typecheck, lint, build, and unit tests.
// @ts-nocheck is forbidden in frontend source and tests. Do not add it. If encountered, remove it and fix typings (or use narrow, justified @ts-expect-error on a specific line only when unavoidable).
Tooling under web_app/ (Vite, ESLint, Playwright, scripts/e2e-server.ts) uses TypeScript; npm run typecheck runs both tsconfig.json (app) and tsconfig.node.json (configs/E2E).

Core UI rules

For UI elements, use only Ant Design (antd) components.
Do not build custom replacement UI controls/components when antd provides an equivalent.
Prefer composition and theming of antd components over custom-drawn UI.

Workflow

Read existing page/component patterns before editing.
Keep logic separated from presentation where practical.
Reuse existing shared components/hooks first.
Add or update tests for behavior changes.
Run targeted tests first, then broader checks.

Commands

Typecheck: cd web_app && npm run typecheck
Unit tests: cd web_app && npm run test:unit
Watch unit tests: cd web_app && npm run test:unit:watch
E2E tests: cd web_app && npm run test:e2e
Lint: cd web_app && npm run lint
CI-equivalent (web): cd web_app && npm run typecheck && npm run lint && npm run build && npm run test:unit:ci

このリポジトリの他の Skills

同じリポジトリ

elixir

streamband/hydra-srt

Use this skill for Elixir/Phoenix development in this repo: implementing features, refactors, debugging, tests, Ecto changes, and production-safe fixes.

2026-06-28133

hydra-mcp

streamband/hydra-srt

Query the running HydraSRT instance via MCP (routes, logs, stats, control). Use when the user invokes /HydraSRT or asks to inspect or control a live HydraSRT deployment through MCP.

2026-06-13133

hydra-dev

streamband/hydra-srt

Run HydraSRT development workflows: mix q quality gate, Elixir unit/E2E tests, native Rust tests, web Vitest/Playwright, and make dev. Use when the user asks to run tests, check code quality, start the dev server, or debug CI locally.

2026-05-31133

gstreamer

streamband/hydra-srt

Use this skill for GStreamer pipeline development and debugging: graph design, caps negotiation issues, latency, synchronization, and runtime diagnostics.

2026-05-17133

hydra-architect

streamband/hydra-srt

Use when designing or evolving Hydra platform architecture across Elixir/Phoenix, SQLite, DuckDB analytics, native/Rust, and runtime boundaries.

2026-05-17133

rust

streamband/hydra-srt

Use this skill for Rust development in this repo: design, implementation, debugging, performance work, and reliable testing.

2026-05-17133

Frontend Skill

When to use

Use for any task touching web_app/, React components, TypeScript, styling, or frontend tests.

TypeScript policy

All new frontend code must be TypeScript — use .ts / .tsx, not .js / .jsx.

Existing JavaScript may stay as-is until you touch that file; when you edit it meaningfully, prefer migrating the changed parts to TypeScript (extract to a .tsx module if the file is large).

Put shared API/domain types in web_app/src/types/ (api.ts, errors.ts, routes.ts, interfaces.ts, endpoints.ts).

Put typed API clients in web_app/src/utils/*.ts (see utils/tokensApi.ts).

New page/tab UI: prefer web_app/src/pages/**/**/*.tsx; keep legacy .jsx parents as thin wrappers if needed.

Run npm run typecheck and npm run lint before considering frontend work done; CI runs typecheck, lint, build, and unit tests.

// @ts-nocheck is forbidden in frontend source and tests. Do not add it. If encountered, remove it and fix typings (or use narrow, justified @ts-expect-error on a specific line only when unavoidable).

Tooling under web_app/ (Vite, ESLint, Playwright, scripts/e2e-server.ts) uses TypeScript; npm run typecheck runs both tsconfig.json (app) and tsconfig.node.json (configs/E2E).

Core UI rules

For UI elements, use only Ant Design (antd) components.

Do not build custom replacement UI controls/components when antd provides an equivalent.

Prefer composition and theming of antd components over custom-drawn UI.

Workflow

Read existing page/component patterns before editing.

Keep logic separated from presentation where practical.

Reuse existing shared components/hooks first.

Add or update tests for behavior changes.

Run targeted tests first, then broader checks.

Commands

Typecheck: cd web_app && npm run typecheck

Unit tests: cd web_app && npm run test:unit

Watch unit tests: cd web_app && npm run test:unit:watch

E2E tests: cd web_app && npm run test:e2e

Lint: cd web_app && npm run lint

CI-equivalent (web): cd web_app && npm run typecheck && npm run lint && npm run build && npm run test:unit:ci

name	frontend
description	Use this skill for frontend work in web_app (React/TypeScript, UI implementation, tests, and refactors).