rifqi96.github.io — Windsurf Rules

• Use Vue 3 <script setup> SFCs with TypeScript • Follow naming conventions: PascalCase for components, kebab-case in templates • Group imports by type (Vue, libraries, internal) • Use strict typing with TypeScript interfaces for object types • Place domain-specific components within their respective domain folders • Leverage composables for reusable logic Here are some specific component guidelines:

• Core Principles Tiptap-Based: Understand Tiptap's core concepts (nodes, marks, extensions). Extension-Driven: Implement features and modifications as Tiptap extensions. • Extension Structure Location: components/Editor/extensions/. Naming: Descriptive names (e.g., ImageGalleryBlock, SpokenQuoteText). Implementation: Each extension is a separate file exporting a Tiptap extension object. Node Views: Use VueNodeViewRenderer for complex content blocks with Vue components. Registration: Register extensions in getAllExtensions in components/ui/StoryEditor/extensions/index.ts. • Extension Types and Patterns Node Extensions (Block-Level): Define block-level elements. Use VueNodeViewRenderer to render Vue components. Define attributes for styling and data. Example: BoxedText.extension.ts Mark Extensions (Inline Styles): Extend the base TextStyle extension. Add attributes for styling (e.g., fontSize). Add commands to apply/remove attributes. Example: TextStyleExtended.extension.ts Utility Extensions: Modify editor behavior or add functionality. Customize placeholder behavior. Example: PlaceholderExtended.extension.ts • Key Considerations Props: Use component props (extensions, editable, options) for customization. Data Flow: modelValue is the single source of truth. Use setContent to update the editor. Styling: Use SCSS and :deep() selectors for Tiptap elements. Performance: Optimize updates and lazy-load resources. Accessibility: Ensure keyboard navigation and screen reader support. • Example Extension Analysis BoxedText: A Node extension that renders a styled container using a Vue component (BoxedText.vue). It defines attributes for background color, border color, and corner radius. TextStyleExtended: A Mark extension that extends the base TextStyle extension to add font size styling. It provides commands to set and unset the font size. PlaceholderExtended: A utility extension that customizes the placeholder text based on the node type. It uses a function to determine the appropriate placeholder text for each node.

• When running in agentic mode, always run yarn typecheck after making changes that are related to typescript and fix any errors that come up, don't stop until all errors are fixed.

• Nuxt 3 for the main frontend library. • Vuetify for the component library. • Supabase for the BaaS. • Tiptap for the editor library.