What problem does it solve? Sharing a React component on social media normally requires manually writing platform-specific copy, building a visual preview, and formatting a props reference. This Skill automates that entire pipeline from a single component file, selection, or pasted code. ## Core Features & Use Cases - Component Capture: Accepts a .tsx/.jsx file path, an IDE selection, or pasted code, and derives the component name, framework badge, and source path automatically. - Static Preview Card: Hand-builds a safe static HTML/CSS approximation of the rendered component (up to 3 prop-driven states) without executing any user code, then screenshots it via Playwright. - Props Table Extraction: Generates a full props table from TypeScript interfaces, inline types, React.FC generics, or propTypes, with an inference fallback for untyped JSX. - Security Gate: Runs a security-scrub check on component source before publishing and stops on any blocked or unrecognized gate result. - Use Case: Point the Skill at Button.tsx and receive platform-aware social copy plus a dark-mode PNG card showing the preview, source code, and props table, saved to docs/media/social/. ## Quick Start Share the React component at src/components/Button.tsx as a social card for Twitter.
