メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | frontend-system |
| description | 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. |
[!CAUTION] ZERO HARDCODED STRINGS! Every user-visible text must use the
useTranslationhook /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:
{
"component.action.state": "Text"
}
sm:, md:, lg:)dark: classesNew public pages MUST include the <SEO /> component:
<SEO
title="Page title"
description="Description for search engines"
/>
<nav>, <main>, <article>)aria-label or visible textMistake: 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.
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].
Mistake: addEventListener('resize') + innerWidth — less performant and off-by-one at the breakpoint.
Fix: matchMedia('(max-width: ${breakpoint - 1}px)') — performant, no overlap.
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.
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).
Shared multi-agent presence and claim protocol. Use before any coding agent starts work in this repo, when coordinating Claude/Codex/Gemini sessions, or when checking who is already working on the repository. Triggers: agent session start, check agent presence, agent coordination, who's working on repo.
Claude Code adapter for the shared agent-presence protocol (for Codex CLI use `.agent/skills/dispatch-watcher/SKILL.md`, for Gemini CLI use `.agent/skills/dispatch-watcher-gemini/SKILL.md`). Use on Claude session start to run pre-flight, claim Slack-dispatched issues (@claude #N), and emit lifecycle events. Triggers: Claude session start, /dispatch, /agent-presence, message addressed to @claude in the dispatch channel.
Gemini CLI adapter for the shared agent-presence protocol (for Claude Code use `.agent/skills/dispatch-watcher-claude/SKILL.md`, for Codex CLI use `.agent/skills/dispatch-watcher/SKILL.md`). Use on Gemini session start to run pre-flight, claim Slack-dispatched issues (@gemini #N), and emit lifecycle events. Triggers: Gemini session start, /dispatch, /agent-presence, message addressed to @gemini in the dispatch channel.
Optional agent dispatch watcher — Phase 1 walking skeleton, Codex-flavored. Use on agent session start when a Slack-style dispatch channel assigns GitHub issues to a model handle such as @codex. For Claude use `.agent/skills/dispatch-watcher-claude/SKILL.md`, for Gemini use `.agent/skills/dispatch-watcher-gemini/SKILL.md`, for the full multi-agent contract see `.agent/skills/agent-presence/SKILL.md`.
PR merge supervisor workflow. Use to merge a GitHub PR safely — resolve review threads correctly, check CI, run an optional repo supervisor, and do post-merge cleanup. Trigger when: /merge, merge PR, complete a PR, finalize a PR.
Use when generating operational reports, release notes, demo readiness checks, stakeholder updates, infrastructure cost/expiry checks, or bilingual changelogs. Triggers: /release-notes, /investor-report, /demo-check, /cost-check, changelog, release notes, stakeholder report, monthly metrics, demo readiness, before demo, infrastructure costs, cost monitoring, certificate expiry.