schema-development

Schema component creation involves defining TypeScript types in types/schema.ts with PascalCase naming, unique ID generation, and semanticTag mapping, then validating against Component Independence requirements using lib/schema-validation.ts to ensure components remain modular and independently testable.

Add breakpoint configurations in your schema, then define layout rules per breakpoint in lib/schema-utils.ts. Apply responsive behavior through breakpoint inheritance, ensuring mobile and desktop layouts validate correctly and support dynamic breakpoint switching without affecting component structure.

Schema normalization reconciles breakpoint-specific overrides with inherited parent configurations, ensuring consistent validation across all breakpoints. Use lib/schema-validation.ts to normalize schemas after modifications so child breakpoints properly inherit parent rules while supporting overrides.

Yes. Canvas layout validation checks positioning, spacing, and component arrangement against your schema definitions. Use lib/schema-validation.ts to validate layouts match your schema's layout definitions and responsive breakpoint rules before deployment.

Non-compliant components fail validation in lib/schema-validation.ts, breaking Component Independence requirements and preventing proper inheritance and normalization. Use lib/schema-utils.ts to audit existing components and apply standardized PascalCase naming, ID generation, and type definitions.

No. You can create new schema components from scratch using TypeScript definitions and breakpoint configurations. The Skill supports both generating new components and modifying existing ones to meet Component Independence standards and responsive design requirements.