mcpField
P
platform-frontend

platform-frontend

github.com/ravnhqDevelopment1640 installsUpdated 21w ago
Repository

About platform-frontend

platform-frontend is a skill offering guidance on code organization, state management, and performance optimization for frontend work. It favors feature-based structure, local state, and measurement before optimization.

Key features

  1. 01Prefer local state
  2. 02Organize code by feature
  3. 03Use named exports
  4. 04Avoid barrel files
  5. 05Measure before optimizing

Use cases

  1. 01Plan state boundaries for a web app
  2. 02Choose data-fetching patterns
  3. 03Structure frontend code
  4. 04Assess whether performance optimization is needed

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/ravnhq/ai-toolkit --skill platform-frontend

After installing, type/platform-frontendin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

rules/
_sections.md
component-composition.md
component-single-responsibility.md
component-use-link.md
data-loading-states.md
org-no-barrel-files.md
state-server-vs-client.md

Details

From the project README

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 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.

Comments

Markdown supported