lazycodex-ai 5.1.35 → 5.1.38

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/border-top-card.css

@@ -0,0 +1,5 @@
+.feature-card {
+  padding: 24px;
+  border-radius: 12px;
+  border-top: 4px solid #6366f1;
+}

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/cva-variant.ts

@@ -0,0 +1 @@
+export const card = cva("rounded-xl bg-white p-6 border-l-4 border-rose-500")

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/gradient-edges.css

@@ -0,0 +1,26 @@
+.hard-stop {
+  border-radius: 12px;
+  background: linear-gradient(to right, #6366f1 4px, #fff 4px);
+}
+
+.image-border {
+  border-radius: 12px;
+  border-left: 4px solid;
+  border-image: linear-gradient(#6366f1, #a855f7) 1;
+}
+
+.glow { position: relative; border-radius: 12px; }
+.glow::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 3px;
+  background: linear-gradient(to bottom, #6366f1, #a855f7);
+}
+
+.end-band {
+  border-radius: 12px;
+  background-image: linear-gradient(to right, #fff calc(100% - 4px), #f43f5e calc(100% - 4px));
+}

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/inline-styles.tsx

@@ -0,0 +1,6 @@
+export const Tip = () => (
+  <>
+    <div style={{ borderRadius: 12, borderLeft: "4px solid #ef4444" }}>Careful</div>
+    <div className="rounded-lg" style={{ borderTop: '3px solid var(--brand)' }}>New</div>
+  </>
+)

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/inset-shadow.css

@@ -0,0 +1,4 @@
+.note {
+  border-radius: 8px;
+  box-shadow: inset 4px 0 0 0 oklch(0.65 0.2 250), 0 1px 2px rgb(0 0 0 / 0.06);
+}

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/non-visible-focus-and-nested.tsx

@@ -0,0 +1,6 @@
+const css = css`
+  .card:focus-within { border-radius: 12px; border-left: 3px solid #6366f1; }
+  td .promo-card { border-radius: 8px; border-left: 4px solid #f43f5e; }
+`
+
+export const Focused = () => <div className="rounded-xl focus:border-l-4 focus:border-indigo-500">Card</div>

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/pseudo-bar.css

@@ -0,0 +1,13 @@
+.stat {
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.stat::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 4px;
+  background: #10b981;
+}

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/split-rule-and-token.scss

@@ -0,0 +1,14 @@
+.callout {
+  border-radius: 0.75rem;
+  border-left: 3px solid var(--color-accent);
+}
+
+.tile {
+  border-radius: 16px;
+  background: var(--surface);
+  &.is-featured {
+    border-left-width: 4px;
+    border-left-style: solid;
+    border-left-color: hsl(262 83% 58%);
+  }
+}

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/styled-components.tsx

@@ -0,0 +1,14 @@
+import styled, { createGlobalStyle } from "styled-components"
+
+export const Banner = styled.div`
+  padding: ${({ theme }) => theme.space[4]}px;
+  border-radius: 12px;
+  border-left: 4px solid #2563eb;
+`
+
+export const Global = createGlobalStyle`
+  .promo-card {
+    border-radius: 8px;
+    border-top: 3px solid var(--color-brand);
+  }
+`

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/tailwind-cards.tsx

@@ -0,0 +1,8 @@
+export function Cards({ featured }: { featured: boolean }) {
+  return (
+    <section>
+      <div className="rounded-xl border-l-4 border-indigo-500 bg-white p-6">Fast</div>
+      <article className={cn("rounded-2xl p-4", featured && "border-t-4 border-t-primary")}>Plans</article>
+    </section>
+  )
+}

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/tailwind-inset-and-style.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="rounded-md p-4 shadow-[inset_3px_0_0_0_#f59e0b]">Heads up</div>
+  <div class="quote">Quote</div>
+</template>
+
+<style scoped>
+.quote {
+  border-radius: 10px;
+  border-left: 5px solid rebeccapurple;
+}
+</style>

package/packages/shared-skills/skills/frontend/scripts/perfection/fixtures/accent-stripes/positive/tailwind-pseudo.html

@@ -0,0 +1,3 @@
+<div class="relative overflow-hidden rounded-lg p-6 before:absolute before:inset-y-0 before:left-0 before:w-1 before:bg-emerald-500">
+  Uptime 99.99%
+</div>