platform-frontend
Framework-agnostic frontend architecture — state management, components, data fetching. Use when building any web frontend, choosing state patterns, or structuring UI code.
Best use case
platform-frontend is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Framework-agnostic frontend architecture — state management, components, data fetching. Use when building any web frontend, choosing state patterns, or structuring UI code.
Teams using platform-frontend should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/platform-frontend/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How platform-frontend Compares
| Feature / Agent | platform-frontend | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Framework-agnostic frontend architecture — state management, components, data fetching. Use when building any web frontend, choosing state patterns, or structuring UI code.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Principles - Start with local state — lift only when shared - Organize code by feature, not by type - Use named exports for better refactoring and searchability - Never use barrel files (index.ts re-exports) — they break tree-shaking and slow builds - Measure before memoizing — don't optimize what isn't slow # Rules See [rules index](rules/_sections.md) for detailed patterns. ## Examples ### Positive Trigger User: "Choose state boundaries and data-fetching patterns for this web app." Expected behavior: Use `platform-frontend` guidance, follow its workflow, and return actionable output. ### Non-Trigger User: "Write a Swift actor for thread-safe cache access." Expected behavior: Do not prioritize `platform-frontend`; choose a more relevant skill or proceed without it. ## Troubleshooting ### Skill Does Not Trigger - Error: The skill is not selected when expected. - Cause: Request wording does not clearly match the description trigger conditions. - Solution: Rephrase with explicit domain/task keywords from the description and retry. ### Guidance Conflicts With Another Skill - Error: Instructions from multiple skills conflict in one task. - Cause: Overlapping scope across loaded skills. - Solution: State which skill is authoritative for the current step and apply that workflow first. ### Output Is Too Generic - Error: Result lacks concrete, actionable detail. - Cause: Task input omitted context, constraints, or target format. - Solution: Add specific constraints (environment, scope, format, success criteria) and rerun. ## Workflow 1. Identify whether the request clearly matches `platform-frontend` scope and triggers. 2. Apply the skill rules and referenced guidance to produce a concrete result. 3. Validate output quality against constraints; if gaps remain, refine once with explicit assumptions.
Related Skills
platform-testing
Framework-agnostic testing principles — test philosophy, structure, mocking boundaries. Use when writing, reviewing, or debugging tests.
platform-database
SQL database design, query optimization, and migration safety. Use when writing queries, designing schemas, or planning database migrations.
platform-cli
Design and implementation patterns for building command-line tools with modern UX. Use when designing a CLI, reviewing CLI UX, defining commands and flags, or implementing error handling and signal handling.
platform-backend
Server-side architecture and security — API design, error handling, validation, logging. Use when building APIs, server logic, or reviewing backend security.
design-frontend
Visual design system patterns for web UIs. Tailwind CSS v4 design tokens and CSS variables, responsive design with container queries, dark mode, layout patterns, and spacing scales. Use when implementing visual designs, working with Tailwind CSS, or building responsive layouts.
agent-skills-manager
Manage AI skills from the Ravn AI Toolkit via corvus CLI — install, update, remove, search, and configure skills for any project. Use when: (1) Installing AI skills into a project, (2) Updating installed skills to latest versions, (3) Browsing or searching available skills, (4) Configuring global or per-project skill sets, (5) Troubleshooting corvus setup. Triggers on: "install skills", "add skills", "update skills", "corvus", "skill manager", "browse skills", "set up AI rules".
type-system-audit
Audit a repository for type-system weaknesses using recent bug-fix commits as hard evidence. Produces prioritized findings tied to specific commits showing which types allowed real bugs. Use when: reviewing type safety, auditing types, analyzing type bugs. Triggers on: type audit, type system review, audit types, type safety audit.
ts-linter
Set up and enforce a strict, production-grade ESLint configuration for TypeScript projects, then systematically fix all linting issues. Use this skill whenever the user asks to add a linter or ESLint, enforce code quality rules, fix linting errors, clean up code style, or add type-aware linting. Trigger on: "lint", "eslint", "code quality", "static analysis", "strict linting", "make it stricter", "make the code stricter", "add better rules", "clean up the codebase", "enforce standards", "fix all the warnings", or "ShadCN lint errors". Handles detection, config generation, dependency installation, auto-fix, and manual remediation. Do NOT use for Biome or Rome projects, Prettier-only formatting, non-TypeScript/JavaScript projects, writing custom ESLint rules or plugins, husky/lint-staged/pre-commit hook setup, or when the user just wants to run an existing linter without changing its configuration.
transcript-notes
Convert meeting transcript .txt files into structured .md notes with metadata, TL;DR, key topics, action items, and quotes. Use when processing raw transcripts into formatted notes. Triggers on: "process transcript", "generate notes from transcript", "transcript to notes", "/transcript-notes".
test-plan-gen
Generate professional QA Test Plan documents (.docx or .pdf) from a structured interview. Trigger on "create/write a test plan", "I need a test plan", "prepare QA documentation", /testplan, or when a user uploads a PRD/requirements and wants a test plan generated.
test-case-gen
Generate, evaluate, audit, and normalize QA test cases to RAVN standards. Trigger on "generate/write/create test cases", "evaluate/score my test cases", "audit my test suite", "review test coverage", "normalize/reformat test cases", or when a user wants test design help. Also triggered by /testcases.
tech-react
React 19 patterns for components, hooks, Server Components, and data fetching. Use when writing React components, managing state with hooks, implementing Suspense boundaries, optimizing renders with proper memoization, or building Server/Client component hierarchies.