panapps-framework-standards
Panapps {{FRAMEWORK_TITLE}} Standards
What this skill does
This skill helps the agent create and review {{FRAMEWORK}} code using Panapps team conventions.
When to use
Use this skill when:
- Building new {{FRAMEWORK}} components
- Refactoring existing {{FRAMEWORK}} code
- Reviewing pull requests
- Improving readability, reusability, and performance
- Checking folder structure and naming conventions
Do not use this skill for:
- Backend-only tasks
- Database schema design
- Infrastructure or DevOps work
Inputs needed
- Feature requirement or ticket summary
- Existing file or component path
- Whether this is a new component or refactor
- Any design reference or API contract if available
Panapps rules
- Prefer clear prop and variable names over short abbreviations
- Keep components small and reusable
- Move repeated UI into shared components
- Keep business logic out of JSX or templates where possible
- Use hooks/state management carefully; avoid unnecessary re-renders
- Use meaningful folder and file names
- Add loading, empty, and error states where needed
- Follow existing project styling conventions before introducing new patterns
Procedure
- Read the existing component or feature context.
- Identify whether the task is create, refactor, fix, or review.
- Apply Panapps standards for {{FRAMEWORK}}.
- Suggest or implement improvements aligned with Panapps rules.
- Verify the output matches project patterns and does not introduce unnecessary complexity.
Validation
A task is complete when:
- Code is readable
- Naming is consistent
- Reusability is improved where appropriate
- Edge states are covered
- The solution follows the project’s current architecture
Common failure modes
- Overcomplicating a simple component
- Introducing inconsistent naming
- Breaking existing styling or folder conventions
- Refactoring too aggressively without need
More from shafeeqnt/agent-skills
panapps-vue.js-standards
Use this for {{FRAMEWORK}} components, pages, hooks, forms, and frontend refactors that should follow Panapps coding standards and review checklist.
5panapps-angular-standards
Use this for {{FRAMEWORK}} components, pages, hooks, forms, and frontend refactors that should follow Panapps coding standards and review checklist.
5panapps-figma-template
Figma template with {{FRAMEWORK}} integration.
3panapps-vue-standards
Use this for {{FRAMEWORK}} components, pages, hooks, forms, and frontend refactors that should follow Panapps coding standards and review checklist.
3panapps-bootstrap-template
bootstrap template with {{FRAMEWORK}} integration.
3panapps-svelte-standards
Use this for {{FRAMEWORK}} components, pages, hooks, forms, and frontend refactors that should follow Panapps coding standards and review checklist.
2