Standardize React and TypeScript frontend components with GraphQL conventions.
npx skills add https://github.com/OrestesK/pi --skill frontend-orestesk
Please help me install this Agent Skill. Skill: frontend Source: https://github.com/OrestesK/pi/tree/main/skills/frontend Command: npx skills add https://github.com/OrestesK/pi --skill frontend-orestesk
This Skill prevents inconsistent React and TypeScript implementations by providing clear conventions for component structure, typing, performance, and GraphQL usage.
Use the frontend skill to review this React component for compliance with the project's React, TypeScript, and GraphQL conventions.
High-intent search queries and answers about installing and using this skill.
To enforce React and TypeScript conventions, use function components, enable strict mode, prefer interfaces for object shapes, avoid any, and use type-only imports to ensure maintainability and type safety across your frontend project.
The best way to integrate GraphQL types in React is by using generated types and reusable fragments instead of manually defining response types. This ensures your components remain type-safe and synchronized with your GraphQL schema.
You should use memoization and effects in React function components sparingly and only when performance-conscious optimizations are necessary. Avoid unnecessary memoization and effects to maintain simpler, more maintainable component logic.
Yes, you can use this skill to review existing TSX or JSX files. It checks your React components for compliance with project conventions, ensuring proper TypeScript strictness, function component usage, and generated GraphQL type integration.
Strict TypeScript in this context requires type-only imports to prevent runtime import of types and ensure cleaner component builds. It works alongside favoring interfaces for object shapes and avoiding any to maximize type safety.
shwilliamsonEnforce JavaScript and TypeScript coding standards with ESLint, Prettier, and strict mode.
0xBigBossGuide React hooks, effects, and component design in .tsx/.jsx codebases.
alienfastGenerate standardized React components and hooks with TypeScript interfaces.
marcusagmRun linting, type checking, and security audits across Node.js/TypeScript and Python projects.
