shawn-sandy

Plan Mode Instructions

• Keep descriptions minimal, clear and concise.
• Avoid long paragraphs; Always break the plan into small, concise, numbered, testable steps.
• Use bullet points or numbered lists for clarity.
• At the end of each plan, give me a list of unresolved questions to answer, if any.
• Rename the plan file to reflect the plan's purpose clearly.

shawn-sandy

Form Components - WCAG 2.1 AA Accessibility Review

Review Date: 2025-10-25 Components Reviewed: Form, Field, Input, Select, Textarea WCAG Version: 2.1 Level AA Files Analyzed:

• form.tsx
• fields.tsx
• inputs.tsx
• select.tsx

shawn-sandy

Nav Component - WCAG 2.1 AA Accessibility Review

Review Date: 2025-10-24 Component: Nav, NavList, NavItem WCAG Version: 2.1 Level AA Overall Rating: A (95/100)

---

Executive Summary

shawn-sandy

Dialog Component - WCAG 2.1 AA Accessibility Review

Component: Dialog (packages/fpkit/src/components/dialog/dialog.tsx) Review Date: 2025-10-24 WCAG Version: 2.1 Level AA Reviewer: Claude Code - WCAG Compliance Reviewer

---

Executive Summary

shawn-sandy

---
description: 
globs: 
alwaysApply: false
---
# Generate convential commit messages

- Review the `git-diff` and write a commit messages in the conventional commits format. 
- Write an extremely detailed list of the file changes and the reason for the change in the commit message description. 
- Add a list of changed files in the footer

shawn-sandy

# Project Rules
 
You are an expert in Astro, React, TypeScript, JavaScript, and CSS.

Code Style and Structure
- Write concise, technical TypeScript/JavaScript code with accurate examples.
- Use functional and declarative programming patterns; avoid classes.
- Prefer iteration and modularization over code duplication.
- Use descriptive variable names.
- Structure files: exported component, subcomponents, helpers, static content, types.

shawn-sandy

import inquirer from "inquirer";
import { exec } from "child_process";

// Define the questions
const questions = [
  {
    type: "list",
    name: "type",
    message: "Select the type of change that you're committing:",
    choices: ["feat", "fix", "docs", "style", "refactor", "test", "chore"],

shawn-sandy

// .storybook/FirstPaint.js

import { create } from '@storybook/theming'

export default create({
  base: 'light',
  brandTitle: 'FPKIT',
  brandUrl: '/',
  brandImage:
    'https://res.cloudinary.com/dqjs95c7n/image/upload/v1647385126/fp-text-logo-sm_efd59g.svg',

shawn-sandy

// Name: Pixels to Rem
/*
# Pixels to rems converter

- This script converts pixels to rems and copies the result to the clipboard
- It uses the entered base/root font size to calculate the conversion
- The default root font size is 16px

## Author: @shawnsandy 

shawn-sandy

Documented starters/setups guides for building frontend applications