almeidamarcell
- 44 skills
- 0 followers
- 3 hours ago last updated
- ▌ Framing Doc · almeidamarcellCreate a framing document from conversation transcripts. Use when the user has transcripts (VTT, call notes, etc.) and wants to produce a frame that captures the problem worth solving and why it was chosen over alternatives.
- ▌ Breadboarding · almeidamarcellTransform a workflow description into affordance tables showing UI and Code affordances with their wiring. Use to map existing systems or design new ones from shaped parts.
- ▌ Harden · almeidamarcellImprove interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.
- ▌ Extract · almeidamarcellExtract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens.
- ▌ SEO Images · almeidamarcellImage optimization analysis for SEO and performance. Checks alt text, file sizes, formats, responsive images, lazy loading, and CLS prevention. Use when user says "image optimization", "alt text", "image SEO", "image size", or "image audit".
- ▌ SEO Hreflang · almeidamarcellHreflang and international SEO audit, validation, and generation. Detects common mistakes, validates language/region codes, and generates correct hreflang implementations. Use when user says "hreflang", "i18n SEO", "international SEO", "multi-language", "multi-region", or "language tags".
- ▌ SEO Technical · almeidamarcellTechnical SEO audit across 9 categories: crawlability, indexability, security, URL structure, mobile, Core Web Vitals, structured data, JavaScript rendering, and IndexNow protocol. Use when user says "technical SEO", "crawl issues", "robots.txt", "Core Web Vitals", "site speed", or "security headers".
- ▌ Delight · almeidamarcellAdd moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.
- ▌ Distill · almeidamarcellStrip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.
- ▌ Onboard · almeidamarcellDesigns and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows.
- ▌ Quieter · almeidamarcellTones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic.
- ▌ Typeset · almeidamarcellImproves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography.
- ▌ Cheap Model Testing · almeidamarcellWhen working on any application that integrates with LLMs or pay-per-usage APIs, always use the cheapest available model during development and testing. Remind to upgrade to a production model before deployment.
- ▌ Colorize · almeidamarcellAdd strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.
- ▌ Critique · almeidamarcell bundleEvaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.
- ▌ Optimize · almeidamarcellDiagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.
- ▌ SEO Audit · almeidamarcellFull website SEO audit with parallel subagent delegation. Crawls up to 500 pages, detects business type, delegates to 9 specialists (7 core + 2 conditional local), generates health score. Use when user says "audit", "full SEO check", "analyze my site", or "website health check".
- ▌ Normalize · almeidamarcellAudits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system.
- ▌ Overdrive · almeidamarcellPushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary.
- ▌ Breadboard Reflection · almeidamarcellReflect on a breadboard by syncing it to the implementation, then finding and fixing design smells. Works on existing breadboards built with the /breadboarding skill.
- ▌ Social Assets Factory · almeidamarcell bundleGenerate scroll-stopping social ad creatives (Instagram square 1080×1080, portrait 4:5, or story 9:16) for your business using Claude Code + the OpenAI Codex CLI — no API keys. Bakes in a proven conversion-focused template — heavy display serif headline, monospace terminal-style accent, dual color palette, floating dark proof card, pose-aware portrait placement, safe zones for cropping, branded CTA pill. First, it tries to follow the branding pattern of the repo/session you're in (DESIGN.md, theme config, CSS variables, brand docs); if none exists, it falls back to a one-time brand profile that captures your colors, fonts, portraits, logo, and voice. After that, every invocation generates 4 layout variations. Trigger via `/social-assets-factory` or whenever the user asks to make social media ads/creatives for their business.
- ▌ Frontend Design · almeidamarcell bundleCreate distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context.
- ▌ Teach Impeccable · almeidamarcellOne-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines.
- ▌ Create Video From Screenshot · almeidamarcell bundleProduce short, punchy onboarding videos in HyperFrames that showcase a feature in action by animating isolated pieces of the UI (cropped components, not full screens) with nice UI-like transitions. Use when the user asks to create, build, or generate an onboarding video, app preview, feature demo clip, App Store preview, or any short video that demonstrates a mobile app feature using supplied screenshots.
- ▌ Test Driven Development · almeidamarcell bundleUse when implementing any feature or bugfix, before writing implementation code
- ▌
- ▌ Animejs · almeidamarcell bundleWhen writing JavaScript animations using anime.js v4, including DOM element animations, timelines, stagger effects, scroll-triggered animations, SVG animations, text animations, draggable elements, layout transitions, or any motion/transition effects on websites. Also use when the user says "animate," "animation library," "anime.js," "stagger," "timeline animation," "scroll animation," "text animation," "draggable," or "motion effects."
- ▌ Changelog Generator · almeidamarcellAutomatically creates user-facing changelogs from git commits by analyzing commit history, categorizing changes, and transforming technical commits into clear, customer-friendly release notes. Always persists the changelog to CHANGELOG.md in the project root.
- ▌ Clearshot · almeidamarcellStructured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image (websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them.
- ▌ Humanizador · almeidamarcell bundleRemove sinais de escrita gerada por IA do texto. Use ao editar ou revisar texto pra que soe mais natural e humano. Baseado no guia abrangente "Signs of AI writing" da Wikipédia. Detecta e corrige padrões como: inflação de simbolismo, linguagem promocional, análises superficiais com gerúndio, atribuições vagas, travessão em excesso, regra de três, vocabulário típico de IA, voz passiva, paralelismos negativos e frases de enchimento.
- ▌ Kickoff Doc · almeidamarcellTurn a shaped project kickoff transcript into a reference document for the builder. Use when the user has a transcript (VTT, etc.) from a kickoff call and wants to produce a document that captures what was shaped and agreed.
- ▌ Safe Deploy · almeidamarcellEnforces safe deployment practices. Use before any production deploy to prevent overwriting newer code. Activated when deploying, pushing to production, or running deploy commands.
- ▌
- ▌
- ▌
- ▌ SEO · almeidamarcell bundleComprehensive SEO analysis for any website or business type. Performs full site audits, single-page deep analysis, technical SEO checks (crawlability, indexability, Core Web Vitals with INP), schema markup detection/validation/generation, content quality assessment (E-E-A-T framework per Dec 2025 update extending to all competitive queries), image optimization, sitemap analysis, and Generative Engine Optimization (GEO) for AI Overviews, ChatGPT, and Perplexity citations. Analyzes AI crawler accessibility (GPTBot, ClaudeBot, PerplexityBot), llms.txt compliance, brand mention signals, and passage-level citability. Industry detection for SaaS, e-commerce, local business, publishers, agencies. Triggers on: "SEO", "audit", "schema", "Core Web Vitals", "sitemap", "E-E-A-T", "AI Overviews", "GEO", "technical SEO", "content quality", "page speed", "structured data".
- ▌ Autoplan · almeidamarcell bundleAuto-review pipeline — reads the full CEO, design, eng, and DX review skills from disk and runs them sequentially with auto-decisions using 6 decision principles. (gstack)
- ▌ Adapt · almeidamarcellAdapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.
- ▌ Audit · almeidamarcellRun technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.
- ▌ Bolder · almeidamarcellAmplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.
- ▌ Polish · almeidamarcellPerforms a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.
- ▌ Animate · almeidamarcellReview a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.
- ▌ Arrange · almeidamarcellImprove layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.
- ▌ Clarify · almeidamarcellImprove unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.