Profile My skills Saved Collections Edit profile Submit a skill

← all publishers

corlab-tech

@corlab-tech source repo

12 published skills

  1. ▌
    Pix · corlab-tech
    Launches an autonomous, pixel-perfect UI implementation loop using Figma MCP and Chrome.
    0
    installs
  2. ▌
    Rigorous · corlab-tech bundle
    Use when the user wants to design, plan, write, review, refactor, test, debug, optimize, harden, or otherwise improve production code. Covers feature implementation, code review, system architecture, debugging, performance work, refactoring, test strategy, error handling, edge cases, dependency choices, and technical standards. Handles 'shape this before I build it', 'review my approach', 'what's wrong with this code', 'simplify this mess', 'why is this slow', 'what tests should I write', 'is this the right abstraction'. Sets up engineering standards (STACK.md, PRINCIPLES.md, TESTING.md) so all sub-commands follow the team's posture. Not for visual / UI design (use impeccable instead) or pure documentation.
    0
    installs
  3. ▌
    Taskloop · corlab-tech bundle
    Autonomous task-execution loop that pulls actionable issues from a task tracker (Linear, Jira, Plane, or GitHub Issues), branches from main, implements, tests, opens a GitHub PR with no AI attribution, and self-paces the next iteration. Use when the user runs `/taskloop init` (one-time per-project setup that picks a provider and generates the loop's memory/config files), `/taskloop start` (re-arms the Monitor + ScheduleWakeup so the loop resumes for the current project), `/taskloop stop`, `/taskloop sync` (hot-repairs drifted/corrupt/missing memory files and adopts new skill rules without stopping the loop), `/taskloop add-rule [slug]`, or `/taskloop status`. Also triggers when the user says "start" / "porneste" / "resume loop" in a working directory that already has a taskloop config under `~/.claude/projects/SLUG/memory/`.
    0
    installs
  4. ▌
    Carbon Icons · corlab-tech
    Carbon Design System icon usage for React components. MANDATORY when any component includes an icon. Use when implementing UI components that need icons, building atoms/molecules/organisms with icon elements, or adding icons to buttons, inputs, navigation, or any other UI element. Covers icon imports, sizing, color, alignment, touch targets, and the V-Shield Design System icon labeling system.
    0
    installs
  5. ▌
    Pix Storybook · corlab-tech
    Autonomous pixel-perfect Stencil component implementation using Figma MCP, Storybook, and Playwright MCP for visual testing and fixing.
    0
    installs
  6. ▌
    MCP Tooling TS · corlab-tech bundle
    MCP Tooling TS
    0
    installs
  7. ▌
    Pixel Perfect UI · corlab-tech bundle
    Autonomous pixel-perfect UI implementation loop for Next.js/React using Figma MCP and Playwright. Converts Figma designs to production-ready components with iterative visual validation. **AUTO-TRIGGERS** on ANY request to implement Figma designs including: 'implement this Figma', 'build this page/component from Figma', 'create from Figma design', 'implement design', 'build this block', 'create component from design'. Use for: (1) Building pages/components from Figma, (2) Pixel-perfect accuracy, (3) Responsive layouts, (4) Design token conversion.
    0
    installs
  8. ▌
    Figma D3 React TS · corlab-tech bundle
    D3.js data visualization in React/Next.js components with PIXEL-PERFECT Figma matching. Use when building interactive charts, graphs, network diagrams, geographic maps, or any custom data visualization with D3.js inside React components. Covers pixel-perfect Figma extraction workflow, iterative visual validation via Playwright, two integration approaches (useRef+useEffect imperative vs declarative React rendering), responsive sizing, TypeScript typing, SSR/Next.js compatibility, accessibility, and performance. Triggers on: 'create a chart', 'add a D3 visualization', 'build a graph component', 'data visualization', 'interactive chart', 'force-directed graph', 'bar chart', 'line chart', 'heatmap', 'scatter plot', 'pie chart', 'chord diagram'.
    0
    installs
  9. ▌
    Figma Storybook Workflow · corlab-tech bundle
    STRICT pixel-perfect Figma to Storybook workflow with ENFORCED extraction and iterative component implementation. MANDATORY: Extract exact design → Implement → Iterate until perfect → Move to next. NO shortcuts, NO assumptions, NO batch processing. Use when implementing Figma designs as Storybook components with 100% accuracy requirement.
    0
    installs
  10. ▌
    Figma Illustration Import · corlab-tech
    Import vector illustrations from Figma as reusable React atom components. Use when a component or page needs a custom illustration (NOT a standard Carbon icon). Triggers on requests like 'implement this illustration from Figma', 'add this Figma illustration', 'create illustration component', or when a Figma node contains a multi-layer vector illustration (lock, envelope, microscope, etc.). BEFORE creating a new illustration, always check if it already exists in `apps/web-app/src/components/atoms/Illustration*.tsx` and `apps/web-app/public/assets/illustrations/`.
    0
    installs
  11. ▌
    Stencil Atomic Design System · corlab-tech
    Use when building a Stencil.js design system with Atomic Design methodology, design tokens, theming support, and slot-based components. Implements a multi-client architecture with standardized patterns for atoms, molecules, organisms, and templates.
    0
    installs
  12. ▌
    Stenciljs Component Development · corlab-tech
    Use when creating or modifying Stencil.js web components. Ensures components follow Stencil best practices, proper decorator usage, lifecycle methods, and TypeScript conventions.
    0
    installs