viably-labs
Official@viably-labs
Offers specialized engineering capabilities for transforming design specifications into production-ready frontend components and maintaining rigorous visual quality standards.
Agent Skills by viably-labs
Showing 15 vetted skills indexed across 1 GitHub repositories.
viably-labsfigma-to-code
Convert Figma designs into framework-specific frontend code using Code Connect.
viably-labsfrontend-design-fix-react
Apply systematic design upgrades to React component aesthetics across typography, color, motion, layout, and backgrounds.
viably-labsgoogle-design-md
Lint DESIGN.md and export design tokens to CSS variables or framework formats.
viably-labsdesign-to-tailwind
Convert Figma, Sketch, and Penpot designs into semantic Tailwind HTML structures.
viably-labsrole-frontend:frontend-performance
Diagnose Core Web Vitals and optimize frontend resource loading.
viably-labsshadcn-ui
Implement shadcn/ui components with Tailwind v4 theming and Radix integration.
viably-labsdesign-to-react
Transform design specs into React components with TypeScript interfaces.
viably-labsfrontend-code-review
Identify frontend code quality issues across React, Vue, and Angular projects.
viably-labsui-designer
Generate React/Tailwind/Framer Motion UI designs and design systems from brief prompts.
viably-labsplaywright-screenshot-inspector
Analyze Playwright screenshots to validate UI rendering accuracy semantically.
viably-labsui-ux-design-system
Designs accessible SaaS UI/UX systems with tokens, shadcn/ui and Radix components, dark mode, WCAG 2.1 AA compliance, and responsive layouts.
viably-labsvisual-testing-advanced
Compare web app screenshots across browsers and viewports to detect UI regressions.
viably-labsfigma
Fetch Figma design context, assets, and variables via MCP server.
viably-labsru-text
Apply Russian typography, punctuation, grammar, and information-style guidelines to text.
viably-labsself-improvement
Log learnings, errors, and feature requests to .learnings files.
Frequently Asked Questions About viably-labs
FAQPage SchemaWhat specific frontend tasks can be performed using these capabilities?▼
These capabilities enable the conversion of Figma designs into React components, the implementation of Tailwind-based design systems, and the optimization of Core Web Vitals. Additionally, they support semantic UI validation through screenshot inspection and the enforcement of WCAG 2.1 AA accessibility standards across web interfaces.
Which engineering personas benefit most from these technical capabilities?▼
Frontend engineers, UI developers, and design system architects benefit most from these capabilities. They are specifically designed for teams needing to bridge the gap between design mockups and production code, ensuring high-fidelity implementation, consistent typography, and rigorous visual regression testing across complex web applications.
What are the primary prerequisites for integrating these design-to-code capabilities?▼
Integration requires access to design source files such as Figma, Sketch, or Penpot, and a project environment configured for React, TypeScript, and Tailwind. Users must also maintain a structured design system or style guide to ensure the generated components align with existing typography, color, and layout tokens.