Review Date: 2025-10-25 Components Reviewed: Form, Field, Input, Select, Textarea WCAG Version: 2.1 Level AA Files Analyzed:
form.tsxfields.tsxinputs.tsxselect.tsx
| --- | |
| 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 |
| # 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. |
| 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"], |
| // .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', |
| // 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 |
| .divider { | |
| position: relative; | |
| text-align: center; | |
| /* padding-bottom: 20px; adjust as needed */ | |
| height: 16px; /* adjust as needed */ | |
| } | |
| .divider span { | |
| background-color: #FFF; | |
| padding: 0 10px; |