profpowell
- 33 skills
- 0 followers
- 17 hours ago last updated
- ▌ Icons · profpowell bundleUse consistent Lucide icons with the <icon-wc> component. Use when adding icons to pages, buttons, or UI elements.
- ▌ Images · profpowellUmbrella coordinator for image handling. Coordinates responsive-images, placeholder-images, and automation scripts. Use when adding images to any page, optimizing existing images, or setting up image pipelines.
- ▌ Layout Grid · profpowellDesign-focused grid layout system with fluid scaling, responsive columns, and resolution-independent patterns. Use when creating page layouts, card grids, or multi-column designs.
- ▌ Xhtml Author · profpowell bundleWrite valid XHTML-strict HTML5 markup. Use when creating HTML files, editing markup, building web pages, or writing any HTML content. Ensures semantic structure and XHTML syntax.
- ▌ Site Scaffold · profpowell bundleGenerate standardized static site structures. Use when creating new websites, setting up demos, or need consistent site structure with SEO, PWA, and accessibility foundations.
- ▌ Custom Elements · profpowell bundleDefine and use custom HTML elements. Use when creating new components, defining custom tags, or using project-specific elements beyond standard HTML5.
- ▌ Data Attributes · profpowellUsing data-* attributes as the HTML/CSS/JS bridge for state, variants, and configuration. Use when managing element state, styling variants, or configuring behavior without JavaScript classes.
- ▌ Pre Flight Check · profpowell bundleINVOKE FIRST before any code work. Validates git workflow (branch, issue, worklog) and checks approach. Use at START of every task and END before completing. Prevents skipped steps.
- ▌ Javascript Author · profpowell bundleWrite vanilla JavaScript for Web Components with functional core, imperative shell. Use when creating JavaScript files, building interactive components, or writing any client-side code.
- ▌ Placeholder Images · profpowellGenerate SVG placeholder images for prototypes. Use when adding placeholder images for layouts, mockups, or development. Supports simple, labeled, and brand-aware types.
- ▌ Progressive Enhancement · profpowellHTML-first development with CSS-only interactivity patterns. Use when building features that work without JavaScript, using native HTML elements, CSS pseudo-classes, and the View Transitions API.
- ▌ Tdd · profpowell bundleTest-Driven Development workflow. Auto-activates when creating new JS/TS files. Advisory mode suggests tests first; strict mode requires them.
- ▌ I18N · profpowellWrite internationalization-friendly HTML pages. Use when creating multilingual content, setting lang attributes, handling RTL languages, or preparing content for translation.
- ▌ Astro · profpowellBuild content-focused websites with Astro. Use when creating .astro files, working with content collections, configuring islands architecture, or deploying to Cloudflare/DigitalOcean.
- ▌ Vitest · profpowellWrite and run tests with Vitest for Vite-based projects. Use when testing Astro components, JavaScript modules, or any Vite project requiring fast, modern testing.
- ▌ Logging · profpowellStructured client-side logging and error reporting. Use when implementing console logging, error tracking, user session tracking, or analytics event patterns.
- ▌ Database · profpowellDesign PostgreSQL schemas with migrations, seeding, and documentation. Use when creating tables, writing migrations, or setting up database structure.
- ▌ Patterns · profpowellReusable HTML page patterns and component blocks. Use when building common page types like FAQs, product listings, press releases, or other structured content.
- ▌ REST API · profpowell bundleWrite REST API endpoints with HTTP methods, status codes, versioning, and OpenAPI documentation. Use when creating API endpoints or implementing backend services.
- ▌ Security · profpowellWrite secure web pages and applications. Use when handling user input, forms, external resources, authentication, or implementing security headers and CSP.
- ▌ API Client · profpowellFetch API patterns with error handling, retry logic, and caching. Use when building API integrations, handling network failures, or implementing offline-first data fetching.
- ▌ CLI Author · profpowellWrite Node.js CLI tools with zero dependencies. Use when creating command-line tools, argument parsing, colored output, or interactive prompts.
- ▌ CSS Author · profpowellModern CSS organization with native @import, @layer cascade control, CSS nesting, design tokens, and element-focused selectors. AUTO-INVOKED when editing .css files.
- ▌ Env Config · profpowellImplement environment variable management with .env files, validation, and environment-specific configs. Use when setting up configuration, handling secrets, or managing different deployment environments.
- ▌ Typography · profpowellCSS typography patterns for readable, beautiful text. Covers type scale, hierarchy, rhythm, font pairing, text-wrap, hanging punctuation, and OpenType features.
- ▌ Validation · profpowellValidate data with JSON Schema and AJV. Use when validating API requests, form submissions, database inputs, or any data boundaries. Provides deterministic validation with consistent error formats.
- ▌ Performance · profpowellWrite performance-friendly HTML pages. Use when optimizing page load, adding resources, configuring caching, or improving Core Web Vitals scores.
- ▌ Data Storage · profpowellImplement client-side data storage with localStorage, IndexedDB, or SQLite WASM. Use when storing user preferences, caching data, or building offline-first applications.
- ▌ Git Workflow · profpowellEnforce structured git workflow with conventional commits, feature branches, semver versioning, and work logging. Use for all code changes to prevent work loss and maintain history.
- ▌ Unit Testing · profpowell bundleWrite unit tests for JavaScript files using Node.js native test runner. Use when creating new scripts, fixing bugs, or when prompted about missing tests.
- ▌ Observability · profpowellImplement error tracking, performance monitoring, and user issue detection. Use when adding error handling, Web Vitals reporting, or debugging production issues.
- ▌ Nodejs Backend · profpowellBuild Node.js backend services with Express/Fastify, PostgreSQL, and services pattern. Use when creating backend APIs, setting up servers, or connecting to databases.
- ▌ Backend Testing · profpowellWrite tests for backend services, APIs, and database access. Use when testing Express/Fastify handlers, services with database calls, or integration tests.