our-nature

Manage content for the lulutracy art portfolio. Use this skill when adding new paintings to the gallery, updating painting metadata, editing the about page, or modifying site configuration. Handles YAML and Markdown content files with i18n support.

Write and debug Gatsby GraphQL queries for this portfolio site. Use this skill when fetching painting data, images, site configuration, or any content from the data layer. Covers page queries, static queries, and schema exploration.

Diagnose and fix Lighthouse audit failures for performance, accessibility, SEO, and best practices. Use this skill when CI reports low Lighthouse scores or when optimizing the site's Core Web Vitals.

Generate React components following project conventions. Use this skill when creating new UI components for the portfolio. Creates TypeScript components with CSS Modules, proper typing, and test files.

Write Jest tests for React components in this Gatsby project. Use this skill when creating new tests or improving test coverage. Handles Gatsby-specific mocking and Testing Library patterns.

Produce a studio-quality demo video walkthrough — drives a web app with Playwright and renders an mp4 with auto zoom-to-click, a macOS browser-window frame on a gradient backdrop, animated cursor + keycast, annotations (highlight/spotlight/callout/arrow/chapter), voiceover, captions (incl. karaoke), music, SFX, and brand cards. Authored from a declarative YAML spec. Use when the user wants a screen-recorded product walkthrough, feature demo, or release video.